Apa perbedaan antara `Objek baru ()` dan notasi literal objek?

Apa perbedaan antara sintaksis berbasis konstruktor ini untuk membuat objek:

person = new Object()

... dan sintaks literal ini:

person = {
    property1 : "Hello"
};

Tampaknya keduanya melakukan hal yang sama, meskipun JSLint lebih suka Anda menggunakan notasi objek literal.

Mana yang lebih baik dan mengapa?

Mereka berdua melakukan hal yang sama (kecuali seseorang melakukan sesuatu yang tidak biasa), selain itu orang kedua Anda membuat objek dan menambahkan properti ke sana. Tetapi notasi literal membutuhkan lebih sedikit ruang dalam kode sumber. Ini jelas dikenali apa yang terjadi, jadi menggunakan new Object(), Anda benar-benar hanya mengetik lebih banyak dan (secara teori, jika tidak dioptimalkan oleh mesin JavaScript) melakukan pemanggilan fungsi yang tidak perlu.

Ini

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

person = {
    property1 : "Hello"
};

secara teknis tidak melakukan hal yang sama. Yang pertama hanya menciptakan objek. Yang kedua menciptakan dan menetapkan properti. Agar yang pertama sama, Anda perlu langkah kedua untuk membuat dan menetapkan properti.

"Sesuatu yang tidak biasa" yang bisa dilakukan seseorang adalah membayangi atau menetapkan ke Objectglobal default :

// Don't do this
Object = 23;

Dalam kasus yang sangat tidak biasa itu, new Objectakan gagal tetapi {}akan berhasil.

Dalam praktiknya, tidak pernah ada alasan untuk menggunakan new Objectdaripada {}(kecuali Anda telah melakukan hal yang sangat tidak biasa).

Tidak ada perbedaan untuk objek sederhana tanpa metode seperti pada contoh Anda. Namun, ada perbedaan besar ketika Anda mulai menambahkan metode ke objek Anda.

Cara literal:

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

Cara prototipe:

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

Kedua cara memungkinkan pembuatan instance Objseperti ini:

var foo = new Obj( "hello" ); 

Namun, dengan cara literal, Anda membawa salinan sayHellometode dalam setiap instance objek Anda. Sedangkan, dengan cara prototipe, metode didefinisikan dalam prototipe objek dan dibagi di antara semua instance objek. Jika Anda memiliki banyak objek atau banyak metode, cara literalnya dapat menyebabkan pemborosan memori yang cukup besar.

Dalam JavaScript, kami dapat mendeklarasikan objek kosong baru dengan dua cara:

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

Saya tidak menemukan apa pun yang menunjukkan bahwa ada perbedaan yang signifikan antara keduanya sehubungan dengan bagaimana mereka beroperasi di belakang layar (tolong perbaiki saya jika saya salah - saya ingin tahu). Namun, metode kedua (menggunakan notasi objek literal) menawarkan beberapa keuntungan.

1. Itu lebih pendek (tepatnya 10 karakter)
2. Lebih mudah, dan lebih terstruktur untuk membuat objek dengan cepat
3. Tidak masalah jika beberapa badut telah secara tidak sengaja menimpa Object

Pertimbangkan objek baru yang berisi Nama anggota dan TelNo. Menggunakan konvensi Object () baru, kita dapat membuatnya seperti ini:

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

Fitur Properti Expando dari JavaScript memungkinkan kami membuat anggota baru dengan cepat, dan kami mencapai apa yang ingin dicapai. Namun, cara ini tidak terlalu terstruktur atau dienkapsulasi. Bagaimana jika kita ingin menentukan anggota berdasarkan kreasi, tanpa harus bergantung pada properti expo dan penugasan pasca kreasi?

Di sinilah objek notasi literal dapat membantu:

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

Di sini kami telah mencapai efek yang sama dalam satu baris kode dan karakter yang jauh lebih sedikit.

Diskusi lebih lanjut metode konstruksi objek di atas dapat ditemukan di: JavaScript dan Pemrograman Berorientasi Objek (OOP).

Dan akhirnya, bagaimana dengan orang idiot yang mengalahkan Object? Apakah Anda pikir itu tidak mungkin? Nah, JSFiddle ini membuktikan sebaliknya. Menggunakan objek notasi literal mencegah kita dari kejatuhan lawak ini.

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

Di komputer saya menggunakan Node.js, saya menjalankan yang berikut:

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

Catatan, ini merupakan perluasan dari apa yang ditemukan di sini: Mengapa arr = [] lebih cepat dari arr = new Array?

output saya adalah sebagai berikut:

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

jadi jelas {} dan [] lebih cepat daripada menggunakan baru untuk membuat objek / array kosong.

Semua orang di sini berbicara tentang kesamaan keduanya. Saya akan menunjukkan perbedaannya.

1. Menggunakan new Object()memungkinkan Anda untuk melewati objek lain. Hasil yang jelas adalah bahwa objek yang baru dibuat akan diatur ke referensi yang sama. Berikut ini contoh kode:

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

2. Penggunaannya tidak terbatas pada objek seperti pada objek OOP. Tipe lain juga bisa diteruskan. Fungsi akan mengatur jenis sesuai. Misalnya jika kita meneruskan bilangan bulat 1 ke sana, objek nomor tipe akan dibuat untuk kita.

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

3. Objek yang dibuat menggunakan metode di atas ( new Object(1)) akan dikonversi ke tipe objek jika properti ditambahkan padanya.

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

4. Jika objek adalah salinan kelas objek anak, kita bisa menambahkan properti tanpa konversi tipe.

   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

Sebenarnya, ada beberapa cara untuk membuat objek dalam JavaScript. Saat Anda hanya ingin membuat objek, tidak ada untungnya membuat objek " berbasis konstruktor " menggunakan operator " baru ". Ini sama dengan membuat objek menggunakan sintaks " objek literal ". Tetapi objek " berbasis konstruktor " yang dibuat dengan operator " baru " mulai digunakan secara luar biasa ketika Anda berpikir tentang " warisan prototypal ". Anda tidak dapat mempertahankan rantai pewarisan dengan objek yang dibuat dengan sintaks literal. Tetapi Anda dapat membuat fungsi konstruktor , melampirkan properti dan metode ke prototipe."Operator, itu akan mengembalikan objek yang akan memiliki akses ke semua metode dan properti yang dilampirkan dengan prototipe fungsi konstruktor itu.

Berikut adalah contoh membuat objek menggunakan fungsi konstruktor (lihat penjelasan kode di bagian bawah):

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

Sekarang, Anda dapat membuat objek sebanyak yang Anda inginkan dengan membuat fungsi konstruksi Person dan semuanya akan mewarisi nama lengkap () darinya.

Catatan: kata kunci " ini " akan merujuk ke objek kosong dalam fungsi konstruktor dan setiap kali Anda membuat objek baru dari Orang yang menggunakan operator " baru ", kata kunci ini akan secara otomatis mengembalikan objek yang berisi semua properti dan metode yang dilampirkan dengan kata kunci " ini " . Dan objek ini pasti akan mewarisi metode dan properti yang dilampirkan dengan prototipe fungsi konstruktor Person (yang merupakan keuntungan utama dari pendekatan ini).

Omong-omong, jika Anda ingin mendapatkan fungsionalitas yang sama dengan sintaks " objek literal ", Anda harus membuat nama lengkap () pada semua objek seperti di bawah ini:

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

Akhirnya, jika Anda sekarang bertanya mengapa saya harus menggunakan pendekatan fungsi konstruktor alih-alih pendekatan objek literal :

*** Warisan prototipe memungkinkan rantai pewarisan sederhana yang bisa sangat berguna dan kuat.

*** Ini menghemat memori dengan mewarisi metode umum dan properti yang didefinisikan dalam prototipe fungsi konstruktor. Jika tidak, Anda harus menyalinnya berulang-ulang di semua objek.

Saya harap ini masuk akal.

Juga, menurut beberapa buku javascript O'Really .... (dikutip)

Alasan lain untuk menggunakan literal yang bertentangan dengan konstruktor Obyek adalah bahwa tidak ada resolusi ruang lingkup. Karena mungkin Anda telah membuat konstruktor lokal dengan nama yang sama, penafsir perlu mencari rantai lingkup dari tempat Anda memanggil Object () sepanjang jalan sampai menemukan global Object constructor.

Saya telah menemukan satu perbedaan, untuk ES6 / ES2015. Anda tidak dapat mengembalikan objek menggunakan sintaks fungsi panah steno, kecuali jika Anda mengelilingi objek tersebut 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 } ]

Hal ini karena compiler bingung oleh {}kurung dan berpikir n: iadalah label: pernyataan konstruksi; titik koma adalah opsional sehingga tidak mengeluh tentang hal itu.

Jika Anda menambahkan properti lain ke objek itu akhirnya akan menimbulkan kesalahan.

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

Pembaruan 2019

Saya menjalankan kode yang sama dengan @rjloura pada simpul OSX High Sierra 10.13.6 saya versi 10.13.0 dan ini adalah hasilnya

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

Penggunaan memori berbeda jika Anda membuat 10 ribu instance. new Object()hanya akan menyimpan satu salinan saja sementara {}akan menyimpan 10 ribu salinan.