`new Object()`和object literal notation有什么区别?

问题描述 投票:184回答:10

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

person = new Object()

...和这个文字语法:

person = {
    property1 : "Hello"
};

虽然JSLint更喜欢使用对象文字表示法,但它们似乎都做同样的事情。

哪一个更好,为什么?

javascript object jslint
10个回答
116
投票

他们都做同样的事情(除非有人做了一些不寻常的事情),除了你的第二个创建一个对象并添加一个属性。但是文字表示法在源代码中占用的空间更少。可以清楚地识别出发生了什么,所以使用new Object(),你实际上只是输入更多内容(理论上,如果没有被JavaScript引擎优化)进行不必要的函数调用。

这些

person = new Object() /*You should put a semicolon here too.  
It's not required, but it is good practice.*/ 
-or-

person = {
    property1 : "Hello"
};

技术上不做同样的事情。第一个只是创建一个对象。第二个创建一个并分配一个属性。要使第一个相同,您需要第二步来创建和分配属性。

有人可以做的“不寻常的事情”是阴影或分配到默认的Object全局:

// Don't do this
Object = 23;

在那个极不寻常的案例中,new Object将会失败,但{}将会奏效。

在实践中,从来没有理由使用new Object而不是{}(除非你做了那个非常不寻常的事情)。


-2
投票

如果创建1万个实例,则内存使用情况不同。 new Object()只保留一份,而{}将保留一万份。


221
投票

没有方法的简单对象没有区别,如您的示例所示。但是,当您开始向对象添加方法时,会有很大的不同。

文字方式:

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方法的副本。然而,使用原型方法,该方法在对象原型中定义并在所有对象实例之间共享。如果你有很多对象或很多方法,那么文字方式会导致相当大的内存浪费。


53
投票

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

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

我发现没有任何迹象表明这两者在幕后操作方面有任何显着差异(如果我错了请纠正我 - 我很想知道)。但是,第二种方法(使用对象文字符号)提供了一些优点。

  1. 它更短(精确10个字符)
  2. 在运行中创建对象更容易,更有条理
  3. 如果一些小丑无意中覆盖了对象并不重要

考虑一个包含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 and Object Oriented Programming (OOP).找到

最后,那个过度使用Object的白痴呢?你觉得这不可能吗?好吧,this JSFiddle证明不然。使用对象文字符号可以防止我们对这个小丑犯罪。

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


40
投票

在我使用Node.js的机器上,我运行了以下内容:

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

请注意,这是此处的扩展:Why is arr = [] faster than arr = new Array?

我的输出如下:

Testing Array:
using[]: 1091ms
using new: 2286ms
Testing Object:
using{}: 870ms
using new: 5637ms

所以很明显{}和[]比使用new创建空对象/数组更快。


30
投票

这里的每个人都在谈论两者的相似之处。我要指出差异。

  1. 使用new Object()允许您传递另一个对象。显而易见的结果是新创建的对象将被设置为相同的引用。这是一个示例代码: var obj1 = new Object(); obj1.a = 1; var obj2 = new Object(obj1); obj2.a // 1
  2. 用法不限于OOP对象中的对象。其他类型也可以传递给它。该功能将相应地设置类型。例如,如果我们将整数1传递给它,将为我们创建一个number类型的对象。 var obj = new Object(1); typeof obj // "number"
  3. 如果向其添加属性,则使用上述方法(new Object(1))创建的对象将转换为对象类型。 var obj = new Object(1); typeof obj // "number" obj.a = 2; typeof obj // "object"
  4. 如果对象是子类对象的副本,我们可以添加属性而不进行类型转换。 var obj = new Object("foo"); typeof obj // "object" obj === "foo" // true obj.a = 1; obj === "foo" // true obj.a // 1 var str = "foo"; str.a = 1; str.a // undefined

17
投票

实际上,有几种方法可以在JavaScript中创建对象。当您只想创建一个对象时,使用“new”运算符创建“基于构造函数”的对象没有任何好处。它与使用“object literal”语法创建对象相同。但是,当您考虑“原型继承”时,使用“new”运算符创建的“基于构造函数”的对象会出现令人难以置信的用途。您无法使用文字语法创建的对象维护继承链。但是您可以创建构造函数,将属性和方法附加到其原型。然后,如果使用“new”运算符将此构造函数赋值给任何变量,它将返回一个对象,该对象可以访问与该构造函数原型相关的所有方法和属性。

下面是使用构造函数创建对象的示例(请参阅底部的代码说明):

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构造函数原型的方法和属性(这是这种方法的主要优点)。

顺便说一句,如果你想用“object literal”语法获得相同的功能,你必须在所有对象上创建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();

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

*** Prototypal继承允许一个简单的继承链,它可以非常有用和强大。

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

我希望这是有道理的。


8
投票

另外,根据一些O'Really javascript书籍....(引用)

使用文字而不是Object构造函数的另一个原因是没有范围解析。因为您可能已经创建了具有相同名称的本地构造函数,所以解释器需要从您调用Object()的位置一直查找作用域链,直到找到全局Object构造函数。


3
投票

对于ES6 / ES2015,我发现了一个区别。除非用new Object()包围对象,否则不能使用简写箭头函数语法返回对象。

> [1, 2, 3].map(v => {n: v});
[ undefined, undefined, undefined ]
> [1, 2, 3].map(v => new Object({n: v}));
[ { n: 1 }, { n: 2 }, { n: 3 } ]

这是因为编译器被{}括号混淆并且认为n: ilabel: statement构造;分号是可选的,所以它不会抱怨它。

如果向对象添加另一个属性,它将最终抛出错误。

$ node -e "[1, 2, 3].map(v => {n: v, m: v+1});"
[1, 2, 3].map(v => {n: v, m: v+1});
                           ^

SyntaxError: Unexpected token :

0
投票

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
© www.soinside.com 2019 - 2024. All rights reserved.