Analisis terperinci dari empat cara untuk membuat objek di JavaScript

Kata pengantar

Ada banyak cara untuk membuat objek menggunakan JavaScript. Sekarang mari kita daftarkan empat dari mereka dan daftarkan kelebihan dan kerugian dari setiap metode, sehingga Anda dapat memilih dan menggunakannya. Mari kita lihat.

Model pabrik

 function createPerson (nama, usia) {var obj = objek baru (); obj.name = nama; obj.age = usia; kembalikan obj; // Pastikan untuk kembali, jika tidak tidak terdefinisi: tidak terdefinisi} var person1 = createPerson baru ('Young', 18); console.log (person1.name + ':' + person1.age);

Keuntungan: Pola pabrik dapat menyelesaikan masalah membuat beberapa objek serupa

Kerugian: Masalah pengenalan objek belum diselesaikan (bagaimana menentukan jenis objek)

Mode konstruktor

 function person (name, use) {this.name = name; this.age = usia; } var person1 = orang baru ('Young', 18); console.log (person1.name + ':' + person1.age);

Sebelum berbicara tentang pro dan kontra, mari kita bicara tentang ceritanya sendiri terlebih dahulu.

Gunakan konstruktor sebagai fungsi

 function person (name, use) {this.name = name; this.age = usia; this.sayname = function () {return this.name; }} // Gunakan var person1 = orang baru ('Young', 18); person1.sayname (); console.log (person1.name + ':' + person1.age); // Calling Person ('Wind', 18); console.log (window.sayname ()); // memanggil var obj = objek baru (); Person.Call (Obj, 'Bird', 100); console.log (obj.sayname ());

Keuntungan dan Kerugian Konstruktor

Keuntungan: Contohnya dapat diidentifikasi sebagai jenis tertentu

Kerugian: Setiap metode harus diciptakan kembali pada setiap instance. Tentu saja Anda dapat mengubahnya seperti ini:

 function person (name, use) {this.name = name; this.age = usia; this.sayname = SayName; } function Wissname () {return this.name; }

Sebaliknya, hubungi fungsi global, jadi tidak ada enkapsulasi. . . Mode prototipe berikut dapat menebus kekurangan ini

Mode prototipe

 function person () {} person.prototype.name = 'Young'; Orang.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = orang baru (); console.log (person1.sayname ()); var person2 = orang baru (); console.log (person1.sayname ()); waspada (person1.sayname === Person2.sayname); // Person1 dan Person2 Mengakses Fungsi SayName () yang sama dari kelompok atribut yang sama

Meskipun nilai yang disimpan dalam prototipe dapat diakses melalui instance objek, nilai yang disimpan dalam prototipe tidak dapat ditulis ulang melalui objek instan

 function person () {} person.prototype.name = 'Young'; Orang.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = orang baru (); var person2 = orang baru (); person1.name = 'wind'; console.log (person1.sayname ()); // wind console.log (person2.sayname ()); // young alert (person1.sayname == person2.sayname); // true

Ketika kami memanggil person1.sayName , kami akan melakukan dua pencarian secara berurutan. Parser pertama menentukan apakah instance person1 memiliki atribut sayName . Jika ada, kita akan memanggil atribut kita sendiri. Jika tidak ada, kami akan mencari atribut dalam prototipe.

 function person () {} person.prototype.name = 'Young'; Orang.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var person1 = orang baru (); var person2 = orang baru (); person1.name = 'wind'; console.log (person1.sayname ()); // wind console.log (person2.sayname ()); // Young Delete Person1.name; console.log (person1.sayname ()); // young console.log (person2.sayname ()); // Young

Gunakan metode hasOwnPropertyType untuk mendeteksi apakah ada properti dalam prototipe atau dalam instance. Metode ini diwarisi dari objek, benar dalam instance dan false dalam prototipe.

Gunakan metode Object.keys() untuk menyebutkan properti instance pada objek

 function person () {} person.prototype.name = 'Young'; Orang.prototype.age = 18; Person.prototype.sayname = function () {return this.name; } var tombol = object.keys (person.prototype); console.log (tombol); // ["name", "usia", "sayname"]

Pro dan kontra dari mode prototipe

Keuntungan: Tidak perlu mengulangi setiap metode pada setiap contoh

Kerugian: Sangat sedikit orang yang menggunakan mode prototipe saja. . Daftar pertanyaan secara detail

 function person () {} person.prototype = {konstruktor: orang, nama: 'young', usia: 18, teman: ['besar', 'babi'], sayname: function () {return this.name; }}; var p1 = orang baru (); var p2 = orang baru (); p1.friends.push ('mon'); console.log (p1.friends); // ["besar", "babi", "mon"] console.log (p2. friends); // ["besar", "babi", "mon"]

Justru karena contoh umumnya memiliki atribut sendiri, dan kami menempatkannya secara Person.prototype di sini, jadi dengan modifikasi P1, seluruh instance dan prototipe dimodifikasi. Kemudian, kita dapat menggunakan kombinasi mode konstruktor dan mode prototipe.

Gunakan mode konstruktor dan mode prototipe dalam kombinasi

 function person (name, use) {this.name = name; this.age = usia; this.friends = ['besar', 'babi']; } Person.prototype = {sayname: function () {return this.name; }}; var p1 = orang baru ('Young', 18); var p2 = orang baru ('angin', 78); p1.friends.push ('raganya'); console.log (p1.friends); // ["Big", "Pig", "Raganya"] Console.log (p2.friends); // ["BIG", "PIG"] Console.log (p1.friends == p2. teman); // false console.log (p1.sayname == p2.sayname);

Pola ini saat ini merupakan metode yang paling banyak digunakan dan paling dikenal untuk membuat tipe khusus. adalah mode default yang digunakan untuk menentukan jenis referensi.

Meringkaskan

Di atas adalah semua tentang menganalisis cara objek dibuat dalam JavaScript. Keempat metode dan kelebihan serta kerugiannya telah dirangkum oleh artikel ini. Saya harap dapat membantu semua orang untuk belajar menggunakan JavaScript.