JavaScript - 构造对象的不同方式

Question

在阅读其他人的源代码和网络上的各种文章时，我发现当不同的人在 JavaScript 中使用“面向对象风格”编程时，他们的做法往往大不相同。

假设，我想创建一个具有 1 个属性和 1 个函数的小模块。我已经看到至少 4 种方法来完成这项任务:

// Option 1
var myObject1 = {
    myProp: 1,
    myFunc: function () { alert("myProp has value " + this.myProp); }
};

// Option 2
var myObject2 = function () {
    return {
        myProp: 1,
        myFunc: function () { alert("myProp has value " + this.myProp); }
    };
}();

// Option 3
var MyObject3 = function () {
    this.myProp = 1;
    this.myFunc = function () { alert("myProp has value " + this.myProp); }
};
var myObject3 = new MyObject3();

// Option 4
var MyObject4 = function () { };
MyObject4.prototype.myProp = 1;
MyObject4.prototype.myFunc = function () { alert("myProp has value " + this.myProp); };
var myObject4 = new MyObject4();

所有这些方法在语法上都是不同的，但似乎生成的对象可以以相同的方式使用。

它们之间的语义区别是什么？是否存在出于某种原因我应该选择这些选项之一而不是其他所有选项的情况？

Answer 1

myObject1 是一个对象文字(单例)。在您只想拥有一个此类对象的情况下很有用。将其视为静态对象。

myObject2 返回一个对象文字。所以在 var foo = myObject2() 之后，变量 foo 将保存结果 { myProp: 1, myFunc: function(){...} 对已执行的父函数的引用。这称为闭包。例如，这可用于定义公共(public) API 或模块。

即:

var foo = (function(){
     var privateProp = "I am a private property";

     // the object below is returned, privateProp is accessible 
     // only through foo.publicProp
     return {
        publicProp: privateProp            
     }
})();

privateProp 属性现在可以通过 foo.publicProp 访问。

MyObject3 和 MyObject4 是构造函数。通过在函数调用之前使用 new 关键字，您可以告诉 JavaScript 创建该对象的 instance。这意味着以这种方式创建的每个新对象都将从对象定义中继承属性和方法。

MyObject3 和 MyObject4 之间的区别在于，在前者的情况下，该对象的每个实例都有它自己的 myProp 和 myFunc 属性，而后者只会引用这些属性。这意味着无论您创建多少个对象 MyObject4 的实例，都只会有一个 myProp 和 myFunc。

我建议您查看闭包、原型(prototype)继承和几种对象设计模式(模块等)在 JavaScript 中的工作方式。