Значение свойства 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 скрипт работает немного быстрее. Помимо того такой код легче поддерживать и развивать.

Результат выполнения кода: