下面这些基于构造函数的创建对象的语法有什么区别:

person = new Object()

...这个文字语法:

person = {
    property1 : "Hello"
};

看起来两者都做同样的事情,尽管JSLint更喜欢使用对象文字表示法。

哪个更好,为什么?


当前回答

2019年更新

我在OSX High Sierra 10.13.6节点10.13.0版本上运行了与@rjloura相同的代码,这些是结果

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');


Testing Array:
using[]: 117.613ms
using new: 117.168ms
Testing Object:
using{}: 117.205ms
using new: 118.644ms

其他回答

Actually, there are several ways to create objects in JavaScript. When you just want to create an object there's no benefit of creating "constructor-based" objects using "new" operator. It's same as creating an object using "object literal" syntax. But "constructor-based" objects created with "new" operator comes to incredible use when you are thinking about "prototypal inheritance". You cannot maintain inheritance chain with objects created with literal syntax. But you can create a constructor function, attach properties and methods to its prototype. Then if you assign this constructor function to any variable using "new" operator, it will return an object which will have access to all of the methods and properties attached with the prototype of that constructor function.

下面是一个使用构造函数创建对象的例子(参见底部的代码说明):

function Person(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
}

Person.prototype.fullname = function() {
    console.log(this.firstname + ' ' + this.lastname);
}

var zubaer = new Person('Zubaer', 'Ahammed');
var john = new Person('John', 'Doe');

zubaer.fullname();
john.fullname();

现在,您可以通过实例化Person构造函数创建任意多的对象,所有这些对象都将从它继承fullname()。

注意: “this”关键字将引用构造函数中的一个空对象,每当您使用“new”操作符从Person创建一个新对象时,它将自动返回一个包含所有属性和方法的对象,并附加“this”关键字。而且这些对象肯定会继承Person构造函数原型附带的方法和属性(这是这种方法的主要优点)。

顺便说一下,如果你想用“对象文字”语法获得相同的功能,你必须在所有对象上创建fullname(),如下所示:

var zubaer = {
    firstname: 'Zubaer',
    lastname: 'Ahammed',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

var john= {
    firstname: 'John',
    lastname: 'Doe',
    fullname: function() {
        console.log(this.firstname + ' ' + this.lastname);
    }
};

zubaer.fullname();
john.fullname();

最后,如果你现在问我为什么要使用构造函数方法而不是对象文字方法:

原型继承允许一个简单的继承链,这是非常有用和强大的。

***通过继承构造函数原型中定义的通用方法和属性来节省内存。否则,你必须在所有对象中一遍又一遍地复制它们。

我希望这是有意义的。

在JavaScript中,我们可以用两种方式声明一个新的空对象:

var obj1 = new Object();  
var obj2 = {};  

我没有发现任何迹象表明这两家公司在幕后的运作方式有任何显著差异(如果我错了,请纠正我——我很想知道)。然而,第二种方法(使用对象文字表示法)提供了一些优点。

它更短(准确地说是10个字符) 动态创建对象更容易,也更结构化 如果某个小丑无意中覆盖了Object也没关系

考虑一个包含成员Name和TelNo的新对象。使用新的Object()约定,我们可以像这样创建它:

var obj1 = new Object();  
obj1.Name = "A Person";  
obj1.TelNo = "12345"; 

JavaScript的Expando Properties特性允许我们以这种方式动态地创建新成员,我们实现了我们的意图。但是,这种方式不是非常结构化或封装的。如果我们希望在创建时指定成员,而不必依赖于expando属性和创建后赋值,该怎么办?

这就是对象文字表示法可以帮助的地方:

var obj1 = {Name:"A Person",TelNo="12345"};  

在这里,我们用一行代码和更少的字符实现了同样的效果。

关于上述对象构造方法的进一步讨论可以在:JavaScript和面向对象编程(OOP)中找到。

最后,那个覆盖Object的白痴呢?你觉得不可能吗?这个JSFiddle证明了事实并非如此。使用对象文字表示法可以防止我们犯这种错误。

(来自http://www.jameswiseman.com/blog/2011/01/19/jslint-messages-use-the-object-literal-notation/)

2019年更新

我在OSX High Sierra 10.13.6节点10.13.0版本上运行了与@rjloura相同的代码,这些是结果

console.log('Testing Array:');
console.time('using[]');
for(var i=0; i<200000000; i++){var arr = []};
console.timeEnd('using[]');

console.time('using new');
for(var i=0; i<200000000; i++){var arr = new Array};
console.timeEnd('using new');

console.log('Testing Object:');

console.time('using{}');
for(var i=0; i<200000000; i++){var obj = {}};
console.timeEnd('using{}');

console.time('using new');
for(var i=0; i<200000000; i++){var obj = new Object};
console.timeEnd('using new');


Testing Array:
using[]: 117.613ms
using new: 117.168ms
Testing Object:
using{}: 117.205ms
using new: 118.644ms

对于没有方法的简单对象(如您的示例)没有区别。 然而,当开始向对象添加方法时,就有很大的不同了。

文字:

function Obj( prop ) { 
    return { 
        p : prop, 
        sayHello : function(){ alert(this.p); }, 
    }; 
} 

原型:

function Obj( prop ) { 
    this.p = prop; 
} 
Obj.prototype.sayHello = function(){alert(this.p);}; 

这两种方法都允许像这样创建Obj实例:

var foo = new Obj( "hello" ); 

然而,使用文字方式,在对象的每个实例中携带sayHello方法的副本。而在原型方法中,方法定义在对象原型中,并在所有对象实例之间共享。 如果有很多对象或方法,文字方式会导致相当大的内存浪费。

唯一一次我将使用'new' keyowrd对象初始化是在内联箭头函数:

() => new Object({ key: value})

因为下面的代码是无效的:

() => { key: value} //  instead of () => { return { key: value};}