Javascript对象:Literal与构造函数

Question

对于创建Javascript对象,我们可以使用Literal或Constructor方式; 在Constructor中,我们说;

function myObj(){
this.myProp1 = "abc";
this.myProp2 = "xyz";
}

用字面的方式,我们说;

var myObj = {
myProp1:"abc",
myProp2:"xyz",
}

我的问题是在声明属性时,为什么会有这样的差异,比如为什么我们在构造方式的情况下使用"this.myProp1"而不是在Literal方式中使用"this"？

Answer 1

两者之间的关键区别在于如何使用它们.顾名思义,构造函数旨在创建和设置对象的多个实例.另一方面,对象文字是一次性的,如字符串和数字文字,并且更常用作配置对象或全局单例(例如,用于命名空间).

关于第一个例子,有一些细微之处需要注意:

执行代码时,会创建并分配匿名函数myObj,但不会发生任何其他情况.methodOne并且methodTwo在myObj明确调用之前不存在.
这取决于如何myObj被调用时,方法methodOne以及methodTwo将在不同的地方结束了:

myObj():
由于未提供上下文,因此this默认值window和方法将变为全局.

var app1 = new myObj():
由于new关键字,会创建一个新对象并成为默认上下文.this引用新对象,并将方法分配给新对象,随后将其分配给新对象app1.但是,myObj.methodOne仍未定义.

myObj.call(yourApp):
这会调用我的,myObj但将上下文设置为另一个对象,yourApp.将分配方法yourApp,覆盖yourApp具有相同名称的任何属性.这是一个非常灵活的方法,允许在Javascript中进行多重继承或混合.

构造函数还允许另一级别的灵活性,因为函数提供闭包,而对象文字则不然.例如,如果methodOne和methodTwo依赖于对象专用的公共变量密码(无法在构造函数外部访问),则可以通过以下操作非常简单地实现:

var myObj = function(){
    var variableOne = "ABCD1234";

    this.methodOne = function(){
       // Do something with variableOne
       console.log(variableOne);
    };
    this.methodTwo = function(){
       // Do something else with variableOne
    };
};

myObj();

alert(variableOne); // undefined
alert(myObj.variableOne); // undefined

如果你想variableOne暴露(公开)你会做:

var myObj = function(){
    this.variableOne = "ABCD1234";

    this.methodOne = function(){
       // Do something with variableOne
       console.log(this.variableOne);
    };
    this.methodTwo = function(){
       // Do something else with variableOne
    };
};

myObj();

alert(variableOne); // undefined
alert(myObj.variableOne); // ABCD1234