В чем различия этих конструкций в JavaScript?

Question

[TrainHard]

Привет, всем!
Прошу объяснить, пожалуйста
Есть такие конструкции:

function Person (name, age) {
	this.name = name;
	this.age = age;
	this.getName = getName;
}

function getName() {
		return this.name;
};

var Mike = new Person('Mike', 24);
var John = new Person('John', 30);

Mike.getName === John.getName;// true

и вот эта:

function Person (name, age) {
	this.name = name;
	this.age = age;
}

Person.prototype.getName = function () {
		return this.name;
};

var Mike = new Person('Mike', 24);
var John = new Person('John', 30);

Mike.getName === John.getName;// и здесь true

Если объекты ссылаются на одну функцию и дают true при сравнении, то есть ли смысл использовать свойство prototype, есть ли разница в конструкциях?

Answer 1

[Виталий Инчин ☢]

1) Все должно быть на своем месте, разложено по полочкам, это основа JavaScript кода. Оправдывается это тем, что над кодом могут работать несколько человек и если у каждого будет свой бардак, то в итоге кто-то может сделать вот так:

function getName(){...} //вы объявили функцию
//code
//code
function getName(){..} //Еще какой-то господин объявил функцию
//Что в итоге? -Объявлена будет вторая.

2) Статичные свойства объекта принято выносить в его прототип, так как создавать множество объектов с идентичным методом getName - глупо, только память забивать.

И если и уподобляться первому варианту, то так:

function Person (name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.getName = getName;

function getName() {
    return this.name;
};

var Mike = new Person('Mike', 24);
var John = new Person('John', 30);

Mike.getName === John.getName;// true

Comments

[TrainHard]

2) Спасибо, но. getName - ссылка присвоенная свойству getName. Она будет общая для всех, также как, если бы мы использовали prototype. В том и суть вопроса.

[Алексей Зуев]

TrainHard: Виталий же написал, что глупо создавать множество объектов с идентичным методом. Основное отличие функционального (ваш первый пример) стиля от прототипного (второй пример) в том, что при прототипном в объект записываются только свойства , а методы остаются в одном месте - в прототипе класса.
Функциональный стиль в каждый объект пишет и свойства и методы.

Создали 10 персон - в прототипном создались только свойства для каждого объекта, а в функциональном под каждый объект выделяется место под this.getName. И не важно, что поле ссылается на одну и ту же, общую для всех, внешнюю FD.

Именно из-за этого отличия прототипный стиль считается быстрее и экономнее по памяти.

[Виталий Инчин ☢]

TrainHard: а с каких пор ссылка - это ничего? Она точно так же кушает память. Можно сказать, что ключевой разницы и нет, просто JS построен на прототипах и плохо ими пренебрегать.

[TrainHard]

Виталий Инчин ☢: Алексей Зуев: Спасибо. Все верно говорите. Но попробую еще раз показать.
Если создадим такой конструктор:

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
  return this.name;
 };
}

то у каждого экземпляра будет свой собственный метод и это будет "кушать" память.
Если так, как Вы говорите:

function Person (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.getName = function () {
 return this.name;
};

то все экземпляры буду ссылаться на один метод и в плане потребления памяти это хорошо.
Однако. Есть еще такая конструкция, повторюсь:

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.getName = getName;
}

function getName() {
    return this.name;
};

И здесь, как в случае с prototype каждый экземпляр будет ссылаться на один общий метод. В чем тогда принципиальная разница между этим способом и prototype?

[Виталий Инчин ☢]

TrainHard: да в том, что getName может изменится где-нибудь в другом месте и все, гасите свет. В первом варианте вы плодите функции, а в последнем ссылки. В остальном разницы почти нет, но, чисто ради любопытства, зачем так делать и при каких условиях?

[TrainHard]

Виталий Инчин ☢: Алексей Зуев: Ребята, еще раз спасибо! Вы мне помогли

[Виталий Инчин ☢]

copal: его и обсуждаем. А вы тут как оказались?

[TrainHard]

copal: Что Вам не нравиться? Объясните, если знаете истину. А то написали свой первый коммент под вопросом и тихо удалили его

[TrainHard]

copal: Так Вы поясните. Что тут смешного или глупого? Я буду рад услышать Ваш аргументированный ответ и отметить его решением. Любой может оставить коммент под видом "умного" знатока. Может Вы один из них? Если нет, то в чем мы "лунатим"?

[Андрей Костин]

TrainHard: В Вашем втором примере вызов метода getName будет работать быстрее, потому что не нужно искать getName в цепочке прототипов.

[zoh]

Нужно учитывать в какой среде идёт запуск исполняемого кода. Сейчас это в массе - VM.
Прогоните через 1кк loop iterations - увидете разницу.
Можно дополнительно прочитать про оптимизирующий компилятор.

Answer 2

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

Краткий ликбез по JS: Как работает прототипное наследование: при обращении к свойству оно ищется сначала в самом объекте, потом, если не найдено, в том объекте, который указан как прототип (скрытое свойство [[Prototype]]) для исходного, потом в прототипе прототипа и так далее, пока прототип не null. Что происходит, когда мы вызываем new SomeFunction(): создается новый объект у которого [[Prototype]] ссылается на SomeFunction.prototype, в контексте этого нового объекта вызывается SomeFunction (как если бы через apply или call), полученный объект возвращается.

1) В первом варианте у вас в конструкторе лишняя операция. А если таких методов 10? А если надо создать 10000 таких объектов?
2) Во первом варианте у вас каждый инстанс будет непосредственно иметь ссылку на getName. Во втором — каждый инстанс будет иметь ссылку на прототип, в котором уже будет ссылка на getName. Значит, первый вариант будет жрать поболе памяти (однако обращение к методу getName будет работать чуточку быстрее).
3) Можно так делать, если очень надо переопределить getName для данного объекта. Но с точки зрения архитектуры — не стоит, лучше создать отдельный класс или фабричную функцию, которая будет возвращать объект с нужным getName. Причина: black magic, который задолбаешься искать по коду.
4) На данный момент времени, можно, наверное, начинать писать на ES2015 с нативными классами, чтобы не придумывать велосипеды с колесами из костылей:)

Comments

[TrainHard]

Спасибо, Константин. Воспользуюсь случаем, если можно, спросить у Вас.
Есть такой код:

function Person (name, age) {
	this.name = name;
	this.age = age;
	
}

var Mike = new Person('Mike', 24);

Person.prototype.getName = function () {// 1
	return this.name;
};

Person.prototype = {// 2
	foo: function () {
		console.log("hello");
	},
	bar: function () {
		console.log('world!');
	}
};

console.log( Mike )// Person { name="Mike",  age=24,  getName=function()}

Скажите, пожалуйста. Почему выводит значение первого пункта, а не второго? По идее, во втором пункте свойство prototype должно быть перезаписано объектом

[TrainHard]

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

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

TrainHard: хороший вопрос:) Не знаю:) Надо подумать.

[TrainHard]

Константин Китманов: :) Солидарность - она такая

[Алексей Зуев]

TrainHard: ООП: Реализация в ECMAScript.

Основное правило здесь звучит следующим образом: прототип объекта задаётся в момент создания объекта и в дальнейшем явно изменён (полностью на новый объект) быть не может. Посредством же явной ссылки prototype в конструкторе, если она не менялась и всё ещё ссылается на тот же объект, можно дописывать новые свойства в прототип объекта.

[TrainHard]

Алексей Зуев: Спасибо, Алексей!