Grafik dan teks menjelaskan objek prototipe dan rantai prototipe JavaScript secara rinci

Bagi pendatang baru, prototipe JavaScript adalah hal yang sangat merepotkan. Pertama, prototipe mudah disamakan dengan __proto__, dan kedua, berbagai arah di antara mereka benar -benar rumit. Faktanya, sudah ada banyak artikel di pasaran yang mencoba membuatnya jelas. Ada gambar klasik yang disebut dengan berbagai garis yang digambar di atasnya, menghubungkan yang ini dan yang itu. Sejujurnya, saya merasa sangat pusing, apalagi memahaminya sepenuhnya. Jadi saya juga ingin mencobanya sendiri untuk melihat apakah saya dapat memisahkan titik -titik pengetahuan penting dalam prototipe dan menjelaskannya dengan jelas dalam bentuk bagan paling sederhana.

Kita tahu bahwa prototipe adalah objek yang melaluinya objek lain dapat menerapkan warisan atribut. Tetapi selain prototipe, ada __proto__ lain yang digunakan untuk? Bagaimana orang bisa membedakannya jika mereka terlihat sangat mirip? Untuk siapa mereka menunjuk? Bagaimana Anda bisa mengingat kekacauannya? Apa rantai prototipe? Saya percaya bahwa banyak pemula yang bahkan memiliki beberapa pengalaman mungkin tidak dapat menjelaskannya sepenuhnya. Berikut ini adalah tiga gambar sederhana dan beberapa kode contoh untuk dipahami.

1. Perbedaan antara prototipe dan __proto__

 var a = {}; console.log (a.prototype); //undefinedConsole.log(a.__proto__); // objek {} var b = function () {} console.log (b.prototype); // b {} console.log (b .__ proto__); //fungsi() {}

 /*1. Metode literal*/var a = {}; console.log (a .__ proto__); // objek {} console.log (a .__ proto__ === a.constructor.prototype); // Benar/*2. Metode konstruktor*/var a = function () {}; var a = baru a (); console.log (a .__ proto__); // a {} console.log (a .__ proto__ === a.constructor.prototype); // Benar/*3. Object.Create () Metode*/var a1 = {a: 1} var a2 = objek.create (a1); console.log (a2 .__ proto__); // objek {a: 1} console.log (a .__ proto__ === a.constructor.prototype); // false (ini adalah pengecualian pada Gambar 1)

 var a = function () {}; var a = baru a (); console.log (a .__ proto__); // a {} (mis. Objek prototipe fungsi konstruktor a) console.log (a .__ proto __.__ proto__); // objek {} (mis. Objek prototipe objek fungsi konstruktor) console.log (a .__ proto __.__ proto __.__ proto__); //batal

Di atas adalah semua tentang artikel ini. Artikel ini menggunakan tiga gambar untuk menjelaskan objek prototipe dan rantai prototipe JavaScript. Saya berharap ini akan membantu semua orang saat mempelajari JavaScript.