Когда использовать методы в конструкторе, а когда — в прототипе?

Question

[alexnotonfire]

Я не понимаю, в каких случаях необходимо метод объекта объявлять в самом конструкторе, а когда - в прототипе.

Вот например в коде ниже я не вижу разницы между двумя методами и хотелось бы чтобы кто-то пролил свет на их использование.

function A() {
  this.method = function() {
    alert('Метод конструктора');
  }
}

A.prototype.method2 = function() {
	alert('Метод прототипа');
}

let object = new A();

Известно ведь, что в новом стандарте ES6 с синтаксисом классов и вовсе нет методов в конструкторе.

Comments

[Kovalsky]

"в новом стандарте ES6 с синтаксисом классов и вовсе нет методов в конструкторе" - конечно есть.

"я не вижу разницы между двумя методами" - разница в том, что один объявлен как свойство экземпляра, а другой - как свойство прототипа, методы из которого наследуются экземплярами. Технически, это исчерпывающий список различий. Остальное - последствия, например хранение метода в каждом экземпляре приведет к увеличенному расходу памяти и т.д.

"Когда использовать методы в конструкторе, а когда — в прототипе?" - и в том и в другом случае ответ один: когда это нужно. Если не видите нужды в чем-то, то не делайте этого; все просто. Нужно забить память объявлением однотипных функций? Объявляйте методы в конструкторе. Не нужно? Объявляйте в прототипе.

Хорошего примера объявления методов в конструкторе, к сожалению, не могу привести.

[alexnotonfire]

Никита Полевой, Благодарю.

Answer 1

[Евгений]

Например у вас есть 1000 объектов, у каждого объекта в конструкторе есть метод который делает одно и тоже для каждого объекта. Занимает память? думаю да. Можно в прототип вынести этот метод и метод будет всего один для каждого объекта, а к нему будут вести ссылки. С точки зрения оптимизации так будет лучше.

Comments

[alexnotonfire]

Спасибо, уже понятней.

[Евгений]

Почитайте Стефанова Javascript. Шаблоны. Много чего полезного для себя найдете.

[alexnotonfire]

Евгений, Обязательно. Благодарю за наводку.

Answer 2

[Антон Мудренок]

Чисто технически, в конструктор могут прилететь свойства, которые будут участвовать в создании методов(методы в своем замыкании будут хранить их значения), а в инстанс самого объекта они не попадут, потому и методы прототипа к ним достучаться не смогут. И еще одно отличие в shadowing-e, если у инстанса есть метод и с таким же названем есть еще и метод в прототипе, то вызовется метод инстанса.

А на деле, если есть цепочка наследования, то наследуются от .prototype через Object.create(), т.е. методы контруктора унаследованы не будут. Удобно, если мы этого не хотим (но так тоже бывает редко, потому что обычно вызывается родительский конструктор).

Answer 3

[Andrey Perov]

Во первых при создание метода в конструкторе, вы переопределяете каждый раз его.
Во вторых как говорилось выше, зачем вам для каждого объекта создавать свой метод, когда лучше обратится по цепочке прототипов к нему.

Вот простой пример как лучше делать es5

var root = document.getElementById('root');

// наш конструктор
function FabricButton(options) { 
    this.element = document.createElement('button');
    this.element.innerHTML = (typeof options.text == 'string') ? options.text : 'there had to be text';
    this.element.style.color = (typeof options.color == 'string') ? options.color : 'blue';
}

// выносим метод нашего класса в прототип, чтобы при создание не перезаписывать его
FabricButton.prototype.render = function(root) {
  root.appendChild(this.element);
}

function FabricButtonPopup(options) { 
    FabricButton.call(this, options);
    this.element.addEventListener('click', this.popup);
}

// Здесь наследуем наш прототип, то есть сюда попадет {constructor: f, render: f} 
FabricButtonPopup.prototype = Object.create(FabricButton.prototype);
FabricButtonPopup.prototype.constructor = FabricButtonPopup; // переопределяем ссылку на наш конструктор

FabricButtonPopup.prototype.popup = function() {
  prompt('open window')
}

var button = new FabricButton({
  text: 'press here',
  color: null
})

var buttonPopup = new FabricButtonPopup({
  text: 'press here man',
  color: 'red'
})

Answer 4

[Константин Китманов]

Известно ведь, что в новом стандарте ES6 с синтаксисом классов и вовсе нет методов в конструкторе.

Отчего же?

class Cls {
  constructor() {
    this.method = () => { console.log('hello!') }
  }
}

Другое дело, что смысла в этом нет. Почти всегда можно определить метод и это будет красивее (читай, проще в поддержке) и быстрее, чем навешивание методов на инстанс.

Answer 5

[leni_m]

когда надо использовать методы в конструкторе - используем методы в конструкторе, а когда надо в прототипе - используем в прототипе.