Прототипы
https://learn.javascript.ru/prototype
var animal = {
eats: true
};
var rabbit = {
jumps: true
};
rabbit.__proto__ = animal;
// в rabbit можно найти оба свойства
alert( rabbit.jumps ); // true
alert( rabbit.eats ); // true
hasOwnProperty
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
Метод hasOwnProperty позволяет проверять является ли данное свойство собственным свойством объекта или же оно взято из прототипа.
rabbit.hasOwnProperty('jumps');//true
rabbit.hasOwnProperty('eats');//false
prototype
var animal = {
eats: true
};
function Rabbit(name) {
this.name = name;
}
Rabbit.prototype = animal;
var rabbit = new Rabbit("Кроль"); // rabbit.__proto__ == animal
alert( rabbit.eats ); // true
constructor
https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor
свойство прототипа constructor указывает на конструктор объекта, то есть
rabbit.__proto__.constructor === Rabbit
Иногда в коде Вы можете столкнуться со следующей строчкой.
Car.prototype.constructor = Car;
Что делает эта строчка? И зачем?
http://stackoverflow.com/questions/8453887/why-is-it-necessary-to-set-the-prototype-constructor
Object.create
Object.create -создает новый объект, используя в качестве прототипа, объект указанный в параметрах.
// Shape — суперкласс
function Shape() {
this.x = 0;
this.y = 0;
}
// метод суперкласса
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info('Фигура переместилась.');
};
// Rectangle — подкласс
function Rectangle() {
Shape.call(this); // вызываем конструктор суперкласса
}
// подкласс расширяет суперкласс
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
console.log('Является ли rect экземпляром Rectangle? ' + (rect instanceof Rectangle)); // true
console.log('Является ли rect экземпляром Shape? ' + (rect instanceof Shape)); // true
rect.move(1, 1); // выведет 'Фигура переместилась.'
// Немного надоедает использовать .call каждый раз. Может воспользоваться bind? // Точно! Давайте привяжем функцию call к контексту slice.
slice = Function.prototype.call.bind(Array.prototype.slice);
// Теперь slice использует первый аргумент в качестве контекста
slice([1,2,3], 0, 1); // => [1]
Полезное чтиво
Зачем использовать Object.create() ? https://stackoverflow.com/questions/15304318/javascript-inheritance-why-use-object-create
Чем работа через прототип отличается от работы через конструктор? http://stackoverflow.com/questions/8433459/js-why-use-prototype
http://stackoverflow.com/questions/1948042/reason-for-using-prototype-in-javascript
Почему прототипное наследование действительно важно http://aaditmshah.github.io/why-prototypal-inheritance-matters
Преимущества прототипного наследования перед классическим http://stackoverflow.com/questions/2800964/benefits-of-prototypal-inheritance-over-classical?rq=1
Практика:
- Есть квадрат. Нужно сделать его прототипом круга
- Сделать массив кругов и квадратов. В цикле вывести их на экран