Шаблон создания объектов JavaScript - PullRequest
Новая
       24

Шаблон создания объектов JavaScript

4 голосов
/ 21 февраля 2012

Я читал здесь статью:

http://javascriptweblog.wordpress.com/2010/03/16/five-ways-to-create-objects/

В ней рассказывается о пяти способах создания объектов.Но мой вопрос один из его способов (3): 

myApp.Notepad = function(defaultFont) {
    var  that = {};
    that.writeable = true;
    that.font = defaultFont;
    that.setFont = function(theFont) {
        that.font = theFont;
    }
    return that;
}

myApp.notepad1 =  myApp.Notepad('helvetica');

По мнению автора, мы можем использовать его, когда необходимо несколько экземпляров, мы можем использовать любой шаблон от 3 (выше) до 5.

Но, насколько я знаю, нам нужно использовать ключевое слово this, которое отражает вновь созданные экземпляры и ссылается только на этот экземпляр.Однако выше автор использует that объект вместо this, а также здесь не используется ключевое слово new.Как это будет применяться к нескольким экземплярам объекта?По сути это то же самое, что и использование this?

Ответы [ 2 ]

4 голосов
/ 21 февраля 2012

В вашем примере that - это новый объект, созданный этой строкой: 

var that = {};

Затем функция переходит к установке свойств этого объекта.

С другой стороны, this используется с функцией конструктора - при вызове с использованием new новый объект автоматически создается и передается функции как this.Тот же пример можно записать так: 

myApp.Notepad = function(defaultFont) {
    this.writeable = true;
    this.font = defaultFont;
    this.setFont = function(theFont) {
        this.font = theFont;
    }
}

myApp.notepad1 = new myApp.Notepad('helvetica');
2 голосов
/ 07 мая 2013

Одно из преимуществ использования конструктора литералов объектов (вашего кода), которое еще не было указано, заключается в том, что при создании нового экземпляра объекта ключевое слово new не обязательно. Иными словами, если вы просто забудете использовать ключевое слово new, ваш код все равно будет работать так, как задумано, поскольку вы больше не полагаетесь на использование ключевого слова new для определения области действия. this вашему вновь созданному объекту в функции конструктора; Объект that теперь позаботится о масштабах для вас.

Это подход, который библиотека YUI (и Дуглас Крокфорд) использует для конструкторов.

Рассмотрим следующий простой конструктор: 

var Car = function(model){
  this.model = model;
};

Если бы вы вызывали Car('Dodge Viper'); или даже var MyCar = Car('Dodge Viper');, this в функции фактически ссылался бы на глобальный window объект. Так что теперь свойство Model выше на самом деле является глобальной переменной, что, вероятно, не то, что предполагалось. 

var Car = function(model) {
  var that = {};
  that.model = model;
  return that;
};

// Both work the same.
var MamsCar = new Car("Mini Cooper"); // with 'new'
var DadsCar = Car("Bugatti Veyron"); // without 'new'
alert("Mam's car is a " + MamsCar.model + " and dad's car is a " + DadsCar.model);
...