Значение свойства prototype записывается в прототип объекта (__proto__) при создании объектов через new.
Перед прочтенем статьи рекомендуется ознакомиться с new, __proto__.
Свойство __proto__ поддерживается только современными браузермами (ИЕ 10+). Поэтому его не рекомендуется использовать. Вместо него можно использовать prototype.
Свойство prototype указывается функции конструктору. При создании объектов с помощью этой функции и new создается объект, в ссылку __proto__ которого записывается значение prototype.
Зачем нужен prototype
В статье про new было создано несколько конструкторов. Например:
function User(name) {
this.name = name;
this.sayHi = function()
{
alert('Привет, меня зовут ' + this.name);
}
}
var andrey = new User('Андрей');
var kira = new User('Андрей');
var jon = new User('Джон');
andrey.sayHi(); //'Привет, меня зовут Андрей'
kira.sayHi(); //'Привет, меня зовут Кира'
jon.sayHi(); //'Привет, меня зовут Джон'
Давайте подумаем, как этот конструктор работает (при вызове с new): создается новый объект. Во время выполнения в него записывается свойство name а также метод sayHi.
При этом свойство name у разных экземпляров будет разное. А вот метод sayHi - одинаковый. Получается, что при каждом вызове конструктора будет выполнятся одно и тоже действие.
Во избежание этого мы можем указывать методы не в самом конструкторе, а в его свойстве prototype:
function User(name) {
this.name = name;
}
User.prototype.sayHi = function()
{
alert('Привет, меня зовут ' + this.name);
}
var andrey = new User('Андрей');
var kira = new User('Андрей');
andrey.sayHi(); //'Привет, меня зовут Андрей'
kira.sayHi(); //'Привет, меня зовут Кира'
Теперь при вызове конструкторов новым экземплярам будет устанавливаться только свойство name, и свойство __proto__ равное prototype. Таким образом метод sayHi будет находится в __proto__.
Вывод: все методы конструкторов нужно размещать в свойстве prototype
См. также instanceof, Object.create.
Синтаксис
Конструктор.prototype
Примеры
Пример
Перепишем слайдер из стати про new указав методы в prototype:
<div id="counter1"></div><br>
<div id="counter2"></div>
function Counter(root) {
this.root = root;
this.val = 0;
this.step = 1;
this.create();
this.initEvents();
}
Counter.prototype.create = function()
{
this.root.innerHTML = '<input type="button" class="counter-plus" value="+">'
+ '<span class="counter-val">' + this.val + '</span>';
this.plusEl = this.root.querySelector('.counter-plus');
this.valEl = this.root.querySelector('.counter-val');
}
Counter.prototype.initEvents = function() {
var self = this;
this.plusEl.addEventListener('click', function() {
self.valEl.innerHTML = (self.val += self.step);
});
};
var root1 = document.getElementById('counter1');
var root2 = document.getElementById('counter2');
var counter1 = new Counter(root1);
var counter2 = new Counter(root2);
В результате можем создавать сколько угодно независимых друг от друга счетчиков. А благодаря тому, что методы находятся в prototype скрипт работает немного быстрее. Помимо того такой код легче поддерживать и развивать.
Результат выполнения кода: