Sự khác biệt giữa `new Object ()` và ký hiệu nghĩa đen của đối tượng là gì?

Sự khác biệt giữa cú pháp dựa trên hàm tạo này để tạo một đối tượng:

person = new Object()

... và cú pháp theo nghĩa đen này:

person = {
    property1 : "Hello"
};

Dường như cả hai đều làm điều tương tự, mặc dù JSLint thích bạn sử dụng ký hiệu nghĩa đen của đối tượng.

Cái nào tốt hơn và tại sao?

Cả hai đều làm điều tương tự (trừ khi ai đó làm điều gì đó bất thường), ngoài việc người thứ hai của bạn tạo ra một đối tượng và thêm một tài sản vào đó. Nhưng ký hiệu theo nghĩa đen chiếm ít không gian hơn trong mã nguồn. Bạn có thể nhận ra rõ ràng những gì đang xảy ra, vì vậy, bằng cách sử dụng new Object(), bạn thực sự chỉ cần gõ nhiều hơn và (theo lý thuyết, nếu không được tối ưu hóa bởi công cụ JavaScript) thực hiện một cuộc gọi chức năng không cần thiết.

Những

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

person = {
    property1 : "Hello"
};

về mặt kỹ thuật không làm điều tương tự. Việc đầu tiên chỉ tạo ra một đối tượng. Thứ hai tạo một và gán một tài sản. Để cái đầu tiên giống nhau, sau đó bạn cần một bước thứ hai để tạo và gán thuộc tính.

"Điều gì đó bất thường" mà ai đó có thể làm là tạo bóng hoặc gán cho Objecttoàn cầu mặc định :

// Don't do this
Object = 23;

Trong trường hợp rất bất thường đó, new Objectsẽ thất bại nhưng {}sẽ hoạt động.

Trong thực tế, không bao giờ có lý do để sử dụng new Objecthơn là {}(trừ khi bạn đã làm điều rất bất thường đó).

Không có sự khác biệt cho một đối tượng đơn giản mà không có các phương thức như trong ví dụ của bạn. Tuy nhiên, có một sự khác biệt lớn khi bạn bắt đầu thêm các phương thức vào đối tượng của mình.

Nghĩa đen

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

Cách thức nguyên mẫu:

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

Cả hai cách đều cho phép tạo ra các trường hợp Objnhư thế này:

var foo = new Obj( "hello" ); 

Tuy nhiên, với cách hiểu theo nghĩa đen, bạn mang theo một bản sao của sayHellophương thức trong mỗi phiên bản của các đối tượng của bạn. Trong khi đó, với cách nguyên mẫu, phương thức được xác định trong nguyên mẫu đối tượng và được chia sẻ giữa tất cả các thể hiện đối tượng. Nếu bạn có nhiều đối tượng hoặc nhiều phương thức, cách hiểu theo nghĩa đen có thể dẫn đến lãng phí bộ nhớ khá lớn.

Trong JavaScript, chúng ta có thể khai báo một đối tượng trống mới theo hai cách:

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

Tôi đã không tìm thấy gì để gợi ý rằng có bất kỳ sự khác biệt đáng kể nào trong hai điều này liên quan đến cách họ vận hành đằng sau hậu trường (xin vui lòng sửa cho tôi nếu tôi sai - tôi rất muốn biết). Tuy nhiên, phương pháp thứ hai (sử dụng ký hiệu nghĩa đen của đối tượng) cung cấp một vài lợi thế.

1. Nó ngắn hơn (chính xác là 10 ký tự)
2. Nó dễ dàng hơn và có cấu trúc hơn để tạo các đối tượng một cách nhanh chóng
3. Sẽ không có vấn đề gì nếu một số con trâu đã vô tình ghi đè đối tượng

Hãy xem xét một đối tượng mới có chứa Tên thành viên và TelNo. Sử dụng quy ước Object () mới, chúng ta có thể tạo nó như thế này:

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

Các expando Thuộc tính năng JavaScript cho phép chúng ta tạo ra các thành viên mới theo cách này một cách nhanh chóng, và chúng tôi đạt được những gì đã có ý định. Tuy nhiên, cách này không có cấu trúc hoặc đóng gói. Điều gì sẽ xảy ra nếu chúng ta muốn chỉ định các thành viên khi tạo, mà không phải dựa vào các thuộc tính mở rộng và gán sau khi tạo?

Đây là nơi ký hiệu nghĩa đen có thể giúp:

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

Ở đây chúng tôi đã đạt được hiệu ứng tương tự trong một dòng mã và ít ký tự hơn.

Một cuộc thảo luận thêm về các phương thức xây dựng đối tượng ở trên có thể được tìm thấy tại: JavaScript và Lập trình hướng đối tượng (OOP).

Và cuối cùng, những gì của kẻ ngốc đã áp đảo Object? Bạn có nghĩ rằng điều đó là không thể? Chà, cái này chứng minh khác. Sử dụng ký hiệu nghĩa đen của đối tượng ngăn chúng ta khỏi phạm lỗi của bộ đệm này.

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

Trên máy của tôi sử dụng Node.js, tôi đã chạy như sau:

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

Lưu ý, đây là phần mở rộng của những gì được tìm thấy ở đây: Tại sao Array = [] nhanh hơn Array = new Array?

đầu ra của tôi là như sau:

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

rõ ràng {} và [] nhanh hơn so với việc sử dụng mới để tạo các đối tượng / mảng trống.

Mọi người ở đây đang nói về sự giống nhau của hai người. Tôi sẽ chỉ ra sự khác biệt.

1. Sử dụng new Object()cho phép bạn vượt qua một đối tượng khác. Kết quả rõ ràng là đối tượng mới được tạo sẽ được đặt thành cùng một tham chiếu. Đây là một mã mẫu:

   var obj1 = new Object();
   obj1.a = 1;
   var obj2 = new Object(obj1);
   obj2.a // 1

2. Việc sử dụng không giới hạn đối với các đối tượng như trong các đối tượng OOP. Các loại khác cũng có thể được truyền cho nó. Hàm sẽ đặt loại cho phù hợp. Ví dụ: nếu chúng ta truyền số nguyên 1 cho nó, một đối tượng có số loại sẽ được tạo cho chúng ta.

   var obj = new Object(1);
   typeof obj // "number"

3. Đối tượng được tạo bằng phương thức trên ( new Object(1)) sẽ được chuyển đổi thành loại đối tượng nếu một thuộc tính được thêm vào nó.

   var obj = new Object(1);
   typeof obj // "number"
   obj.a = 2;
   typeof obj // "object"

4. Nếu đối tượng là bản sao của một lớp đối tượng con, chúng ta có thể thêm thuộc tính mà không cần chuyển đổi loại.

   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

Trên thực tế, có một số cách để tạo các đối tượng trong JavaScript. Khi bạn chỉ muốn tạo một đối tượng, không có lợi ích gì khi tạo các đối tượng " dựa trên hàm tạo " bằng cách sử dụng toán tử " mới ". Nó giống như việc tạo một đối tượng bằng cú pháp " đối tượng theo nghĩa đen ". Nhưng các đối tượng " dựa trên hàm tạo" được tạo bằng toán tử " mới " sẽ sử dụng đáng kinh ngạc khi bạn đang nghĩ về " thừa kế nguyên mẫu ". Bạn không thể duy trì chuỗi kế thừa với các đối tượng được tạo bằng cú pháp bằng chữ. Nhưng bạn có thể tạo một hàm tạo , gắn các thuộc tính và phương thức vào nguyên mẫu của nó."Toán tử, nó sẽ trả về một đối tượng sẽ có quyền truy cập vào tất cả các phương thức và thuộc tính được đính kèm với nguyên mẫu của hàm xây dựng đó.

Dưới đây là một ví dụ về việc tạo một đối tượng bằng hàm constructor (xem phần giải thích mã ở phía dưới):

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

Bây giờ, bạn có thể tạo nhiều đối tượng như bạn muốn bằng cách khởi tạo hàm xây dựng Person và tất cả chúng sẽ kế thừa fullname () từ nó.

Lưu ý: từ khóa " this " sẽ đề cập đến một đối tượng trống trong hàm constructor và bất cứ khi nào bạn tạo một đối tượng mới từ Person bằng toán tử " new ", nó sẽ tự động trả về một đối tượng chứa tất cả các thuộc tính và phương thức được đính kèm với từ khóa " this " . Và các đối tượng này chắc chắn sẽ kế thừa các phương thức và thuộc tính được gắn với nguyên mẫu của hàm xây dựng Person (đây là ưu điểm chính của phương pháp này).

Nhân tiện, nếu bạn muốn có được chức năng tương tự với cú pháp " đối tượng bằng chữ ", bạn sẽ phải tạo fullname () trên tất cả các đối tượng như dưới đây:

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

Cuối cùng, nếu bây giờ bạn hỏi tại sao tôi nên sử dụng phương pháp tiếp cận hàm xây dựng thay vì cách tiếp cận theo nghĩa đen của đối tượng :

*** Kế thừa nguyên mẫu cho phép một chuỗi thừa kế đơn giản có thể vô cùng hữu ích và mạnh mẽ.

*** Nó tiết kiệm bộ nhớ bằng cách kế thừa các phương thức và thuộc tính phổ biến được xác định trong nguyên mẫu hàm xây dựng. Nếu không, bạn sẽ phải sao chép chúng nhiều lần trong tất cả các đối tượng.

Tôi hy vọng điều này có ý nghĩa.

Ngoài ra, theo một số sách javascript của O'Really .... (trích dẫn)

Một lý do khác để sử dụng các chữ trái ngược với hàm tạo Object là không có độ phân giải phạm vi. Vì có thể bạn đã tạo một hàm tạo cục bộ có cùng tên, trình thông dịch cần tra cứu chuỗi phạm vi từ nơi bạn đang gọi Object () cho đến khi tìm thấy hàm tạo đối tượng toàn cục.

Tôi đã tìm thấy một sự khác biệt, cho ES6 / ES2015. Bạn không thể trả về một đối tượng bằng cú pháp hàm mũi tên tốc ký, trừ khi bạn bao quanh đối tượng 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 } ]

Điều này là do trình biên dịch bị nhầm lẫn bởi {}dấu ngoặc và nghĩ n: ilà nhãn: xây dựng câu lệnh ; dấu chấm phẩy là tùy chọn để nó không phàn nàn về nó.

Nếu bạn thêm một thuộc tính khác vào đối tượng thì cuối cùng nó sẽ xuất hiện lỗi.

$ 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 :

Cập nhật 2019

Tôi đã chạy mã giống như @rjloura trên phiên bản nút OSX High Sierra 10.13.6 10.13.0 và đây là kết quả

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

Sử dụng bộ nhớ là khác nhau nếu bạn tạo ra 10 nghìn trường hợp. new Object()sẽ chỉ giữ một bản duy nhất trong khi {}sẽ giữ 10 nghìn bản.