JavaScript 对象创建模式

发布于 2025-01-07 17:22:57 字数 783 浏览 0 评论 0原文

我在这里阅读一篇文章:

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 相同吗?

I was reading an article here:

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

It tells about five ways of creating objects. But my question is one of his way (3) is:

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');

As per author, we can use it when multiple instances are needed we can use any pattern from 3 (above) to 5.

But as far as I know, we do need to use this keyword which reflects back newly created instances and refers to only that instance. However above, author uses that object instead of this and also there is no new keyword used above. How will it apply to multiple object instances ? Is it essentially same as using this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

乄_柒ぐ汐 2025-01-14 17:22:57

在您的示例中,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');

In your example, that is a new object created by this line:

var that = {};

The function then proceeds to set the properties of this object.

On the other hand, this is used with a constructor function -- when called using new, a new object is automatically created and passed to the function as this. The same example could be written as:

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

myApp.notepad1 = new myApp.Notepad('helvetica');
波浪屿的海角声 2025-01-14 17:22:57

使用对象字面量构造函数(您的代码)的一个尚未指出的优点是,当您创建对象的新实例时,不需要 new 关键字。或者换句话说,如果您只是忘记使用new关键字,您的代码仍将按预期运行,因为您不再依赖于的使用new 关键字将 this 的范围赋予构造函数中新创建的对象; that 对象现在正在为您处理范围。

这是 YUI 库(和 Douglas Crockford)对构造函数采用的方法。

考虑以下简单的构造函数:

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);

One advantage of the using the object literal constructor (your code) that hasn't been pointed out yet is that when you are creating a new instance of an object, the new keyword is not necessary. Or in other words, if you simply forget to use the new keyword, your code will still run as intended as you are no longer relying on the use of the new keyword to give the scope of this to your newly created object in your constructor function; The that object is now taking care of the scope for you.

This is the approach that the YUI library (and Douglas Crockford) takes for constructors.

Consider the following simple constructor:

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

If you were to call Car('Dodge Viper'); or even var MyCar = Car('Dodge Viper');, the this in the function would actually refer to the global window object. So now the property Model above is actually a global variable, which is probably not what was intended.

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);

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文