Я потратил много времени на разработку простых виджетов для проектов следующим образом:
var project = project || {};
(function() {
project.elements = {
prop1: val1,
prop2: val2
}
project.method1 = function(val) {
// Do this
}
project.method2 = function(val) {
// Do that
}
project.init = function() {
project.method1(project.elements.prop1)
project.method2(project.elements.prop2)
}
})()
project.init();
Но я начал менять свой формат следующим образом:
function Project() {
this.elements = {
prop1: val1,
prop2: val2
}
this.method_one(this.elements.prop1);
this.method_two(this.elements.prop2);
}
Project.prototype.method_one = function (val) {
//
};
Project.prototype.method_two = function (val) {
//
};
new Project();
Конечно, это глупые примеры, так что не оборачивайтесь вокруг акселя. Но в чем функциональная разница, и когда я должен выбрать один или другой?
design-patterns
javascript
prototyping
JDillon522
источник
источник
project
объявление внутри функции. Обновлено.Ответы:
Первое различие можно суммировать как:
this
относится к экземпляру класса.prototype
относится к определению .Допустим, у нас есть следующий класс:
Так что здесь мы прикрепляемся
this.number
к каждому экземпляру класса, и это имеет смысл, потому что у каждогоFlight
должен быть свой номер рейса.Напротив,
prototype
определяет единственное свойство, к которому могут обращаться все экземпляры.Теперь, если мы хотим получить номер рейса, мы можем просто написать следующий фрагмент, и все наши экземпляры получат ссылку на этот недавно созданный прототип объекта.
Второе отличие заключается в том, как JavaScript ищет свойство объекта. Когда вы ищете
Object.whatever
, JavaScript проходит вплоть до основного объекта Object (объекта, от которого все остальное унаследовано), и как только он находит совпадение, он возвращает или вызывает его.Но это происходит только для прототипов. Так что, если вы находитесь где-то на более высоких уровнях
this.whatever
, JavaScript не будет рассматривать это как совпадение и продолжит поиск.Посмотрим, как это происходит на самом деле.
Сначала обратите внимание, что [почти] все объекты в JavaScript. Попробуй это:
Теперь давайте посмотрим, что внутри
Object
(обратите внимание на верхний регистрO
и.
в конце). В инструментах разработчика Google Chrome при вводе.
вы получите список доступных свойств внутри этого конкретного объекта.Теперь сделайте то же самое для
Function
:Вы можете заметить
name
метод. Просто иди и запусти и посмотрим, что получится:Теперь давайте создадим функцию:
И давайте посмотрим, есть ли у нас
name
здесь метод:Вы должны получить пустую строку, но это нормально. Вы не должны получить ошибку или исключение.
Теперь давайте добавим что-нибудь к этому богоподобному
Object
и посмотрим, получим ли мы это и в других местах?И вот вы идете:
Во всех случаях вы должны увидеть
"Okay!"
.Что касается плюсов и минусов каждого метода, вы можете рассматривать прототипирование как «более эффективный» способ выполнения задач, поскольку он сохраняет ссылку на каждый экземпляр, а не копирует все свойство в каждом объекте. С другой стороны, это пример Tightly Coupling, который является большим нет-нет, пока вы действительно не сможете обосновать причину.
this
это довольно сложно, так как это имеет отношение к контексту. Вы можете найти много хороших ресурсов бесплатно в Интернете.Тем не менее, оба способа являются лишь языковыми инструментами, и это действительно зависит от вас и от проблемы, которую вы пытаетесь решить, чтобы выбрать то, что подходит лучше.
Если вам нужно, чтобы свойство имело отношение к каждому экземпляру класса, используйте
this
. Если вам нужно иметь свойство, чтобы оно функционировало одинаково на каждом экземпляре, используйтеprototype
.Обновить
Что касается ваших образцов фрагментов, то первый пример является примером Singleton , поэтому имеет смысл использовать его
this
в теле объекта. Вы также можете улучшить свой пример, сделав его модульным, как этот (и вам не обязательно всегда использовать егоthis
).Ваш второй фрагмент не имеет особого смысла, потому что сначала вы используете,
this
а потом пытаетесь его взломатьprototype
, что не работает, потому чтоthis
имеет приоритет надprototype
. Я не уверен, чего вы ожидали от этого фрагмента кода и как он работал, но я настоятельно рекомендую вам его реорганизовать.Обновить
Чтобы уточнить
this
приоритет,prototype
я могу показать вам пример и рассказать, как это можно объяснить, но у меня нет внешних ресурсов для его поддержки.Пример очень прост:
Объяснение, как мы знаем,
this
имеет отношение к контексту. Так что он не появится, пока контекст не будет готов. Когда контекст готов? Когда новый экземпляр создается! Остальное угадай сейчас! Это означает, что хотяprototype
определение существует, ноthis
имеет больше смысла иметь приоритет, потому что все дело в том, что новый экземпляр создается в этот момент.источник
this
в глупом примере прототипа, потому чтоthis
относится к его собственным свойствам, включая его методы. Я не изучаю лучшее из чтения о коде, но больше из рассмотрения кода. ( Немного MDN , Object Playground (потрясающе) и некоторые другие). Можете ли вы указать на что-то, что объясняет то, что вы имеете в виду, когда «this
имеет приоритет надprototype
»? Я хотел бы изучить это больше.