Ilustrasi hubungan segitiga antara prototipe, proto dan konstruktor

Ada banyak dan hubungan kacau di JavaScript. Rantai lingkup adalah hubungan rantai satu arah, yang cukup sederhana dan jelas; Hubungan panggilan mekanisme ini agak rumit; Dan untuk prototipe, ini adalah hubungan segitiga antara prototipe, proto dan konstruktor. Artikel ini pertama kali menggunakan gambar untuk mengklarifikasi artinya, dan kemudian menjelaskan hubungan segitiga dari prototipe secara detail.

Ilustrasi

konsep

Hubungan kompleks dalam gambar di atas sebenarnya berasal dari dua baris kode

 function foo () {}; var f1 = foo baru;

【Konstruktor】

Fungsi yang digunakan untuk menginisialisasi objek yang baru dibuat adalah konstruktor. Dalam contoh, fungsi foo () adalah konstruktor

【Objek instan】

Objek yang dibuat oleh operasi baru konstruktor adalah objek instan. Anda dapat menggunakan satu konstruktor untuk membangun beberapa objek instan

 function foo () {}; var f1 = foo baru; var f2 = new foo; console.log (f1 === f2); // false

【Prototipe Objek dan Prototipe】

Konstruktor memiliki properti prototipe yang menunjuk pada objek prototipe dari objek instan. Beberapa objek yang dipakai oleh konstruktor yang sama memiliki objek prototipe yang sama. Gunakan objek prototipe secara teratur untuk mencapai warisan

 function foo () {}; foo.prototype.a = 1; var f1 = foo baru; var f2 = new foo; console.log (foo.prototype.a); // 1console.log (f1.a); // 1console.log (f2.a); // 1console.log (f1);

【Konstruktor】

Objek prototipe memiliki atribut konstruktor yang menunjuk ke fungsi konstruktor yang sesuai dengan objek prototipe.

 function foo () {}; console.log (foo.prototype.constructor === foo); // true

Karena objek instan dapat mewarisi sifat -sifat objek prototipe, objek instan juga memiliki atribut konstruktor, yang juga menunjuk ke fungsi konstruktor yang sesuai dengan objek prototipe.

 function foo () {}; var f1 = new foo; console.log (f1.constructor === foo); // true

【Proto】

Objek instan memiliki atribut proto yang menunjuk ke objek prototipe yang sesuai dengan objek instance

 function foo () {}; var f1 = new foo; console.log (f1 .__ proto__ === foo.prototype); // true

menjelaskan

Konsep telah diperkenalkan, dan sekarang kami akan menjelaskan hubungan secara rinci.

 function foo () {}; var f1 = foo baru;

【Bagian 1: foo】

Objek instan F1 dibuat oleh operasi baru konstruktor foo (). Objek prototipe dari konstruktor foo () adalah foo.prototype; Objek instan F1 juga menunjuk ke objek prototipe foo.prototype melalui atribut __proto__.

 function foo () {}; var f1 = new foo; console.log (f1 .__ proto === foo.prototype); // true

Objek instan F1 sendiri tidak memiliki atribut konstruktor, tetapi dapat mewarisi atribut konstruktor dari objek prototipe foo.prototype.

 function foo () {}; var f1 = new foo; console.log (foo.prototype.constructor === foo); // trueconsole.log (f1.constructor === foo); // trueconsole.log (f1.hasownproperty ('konstruktor'));

Gambar berikut menunjukkan efek konsol dari objek instan F1

【Bagian 2: Objek】

Foo.prototype adalah objek prototipe F1, dan juga merupakan objek instan. Bahkan, objek apa pun dapat dianggap sebagai objek yang dipakai melalui operasi baru dari objek () konstruktor. Jadi, foo.prototype adalah objek instan, konstruktornya adalah objek () dan objek prototipe adalah objek.prototype. Dengan demikian, properti prototipe dari objek konstruktor () menunjuk ke objek objek prototipe; Properti Proto dari objek instan FOO.Prototype juga menunjuk ke objek objek prototipe

 function foo () {}; var f1 = new foo; console.log (foo.prototype .__ proto__ === objek.prototype); // true

Objek instan Foo.prototype itu sendiri memiliki atribut konstruktor, sehingga mengesampingkan atribut konstruktor yang diwarisi dari objek objek prototipe.prototype

 function foo () {}; var f1 = new foo; console.log (foo.prototype.constructor === foo); // trueconsole.log (objek.prototype.constructor === Objek); // trueconsole.log (foo.prototype.hasownproperty ('constructor')); // trueconsole.log (foo.prototype.hasownproperty ('constructor')); // true

Gambar berikut menunjukkan efek konsol dari objek instance foo.prototype

Jika Object.Prototype adalah objek instan, apa objek prototipe -nya? Hasilnya adalah nol. Saya pikir ini juga merupakan hasil dari tipe null, yang merupakan salah satu alasan mengapa 'objek'

 console.log (object.prototype .__ proto__ === null); // true

【Bagian 3: Fungsi】

Seperti disebutkan sebelumnya, fungsi adalah objek, tetapi objek dengan fungsi khusus. Fungsi apa pun dapat dianggap sebagai hasil instantiasi melalui operasi baru konstruktor ().

Jika fungsi FOO dianggap sebagai objek instan, konstruktornya adalah fungsi () dan objek prototipenya adalah function.prototype; Demikian pula, konstruktor objek fungsi juga fungsi (), dan objek prototipenya adalah function.prototype.

 function foo () {}; var f1 = new foo; console.log (foo .__ proto__ === function.prototype); // trueconsole.log (objek .__ proto__ === function.prototype); // true

Atribut konstruktor dari fungsi objek prototipe.Prototype menunjuk ke fungsi konstruktor (); Objek instan objek dan FOO tidak memiliki atribut konstruktor, dan perlu untuk mewarisi atribut konstruktor dari fungsi objek prototipe.prototype.

 function foo () {}; var f1 = new foo; console.log (function.prototype.constructor === Function); // trueconsole.log (foo.constructor === fungsi); // trueconsole.log (foo.hasownproperty ('constructor'); Fungsi); // trueconsole.log (object.hasownproperty ('constructor')); // false

Semua fungsi dapat dianggap sebagai objek instantiated dari operasi baru fungsi konstruktor (). Kemudian, fungsi dapat dianggap sebagai hasil dari memanggil instantiasi operasinya sendiri.

Jadi, jika fungsi adalah objek instan, konstruktornya adalah fungsi, dan objek prototipe adalah function.prototype

 console.log(Function.__proto__ === Function.prototype);//trueconsole.log(Function.prototype.constructor === Function);//trueconsole.log(Function.prototype === Function);//trueconsole.log(Function.prototype === Function);//true

Jika function.prototype adalah objek instan, apa objek prototipe -nya? Seperti sebelumnya, semua objek dapat dianggap sebagai hasil instantiasi dari operasi baru dari objek () konstruktor. Oleh karena itu, objek prototipe fungsi.prototype adalah objek.prototype, dan fungsi prototipenya adalah objek ()

 console.log (function.prototype .__ proto__ === objek.prototype); // true

Bagian kedua memperkenalkan bahwa objek prototipe objek.prototype adalah nol

 console.log (object.prototype .__ proto__ === null); // true

Meringkaskan

【1】 Fungsi (fungsi juga merupakan fungsi) adalah hasil dari fungsi baru, sehingga fungsi dapat digunakan sebagai objek instan, konstruktornya adalah fungsi (), dan objek prototipe adalah fungsi.prototype

【2】 Objek (fungsi juga objek) adalah hasil dari objek baru, sehingga objek dapat digunakan sebagai objek instan, konstruktornya adalah objek (), dan objek prototipe adalah objek.prototype

【3】 objek. Objek prototipe Prototype adalah nol