Analisis lengkap prototaip prototaip dalam pengetahuan JavaScript_Basic

Untuk memahami prototaip dalam JS, anda mesti terlebih dahulu memahami konsep berikut
1. Semua dalam JS ialah objek

2. Segala-galanya dalam JS diperoleh daripada Object, iaitu, titik akhir rantai prototaip segala-galanya menghala ke Object.prototype

  // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", 
   // "propertyIsEnumerable", "__defineGetter__", "__lookupGetter__", "__defineSetter__",
   // "__lookupSetter__"]
   console.log(Object.getOwnPropertyNames(Object.prototype));

3. Hubungan halus antara pembina dan kejadian (objek) dalam JS
Pembina mentakrifkan prototaip untuk bersetuju dengan spesifikasi contohnya, dan kemudian menggunakan baharu untuk membina tika itu Peranan mereka adalah untuk menghasilkan objek.
Pembina (kaedah) itu sendiri ialah contoh kaedah (Fungsi), jadi __proto__ (rantai prototaip)nya juga boleh ditemui

Objek / fungsi F() {} Ini ialah pembina, satu disediakan oleh API asli JS, dan satu lagi disesuaikan
new Object() / new F() Ini adalah contoh
Contoh "hanya boleh" menyemak __proto__ untuk mengetahui prototaip itu berdasarkan,
Dan "tidak boleh" mentakrifkan semula prototaip tika itu untuk mencipta tika tika itu.

Amalan membawa pengetahuan yang benar, hanya dengan memerhati/memikirkan diri anda boleh benar-benar memahami:

  // 先来看看构造函数到底是什么
  // function Empty() {}  function Empty() {}
  console.log(Function.prototype, Function.__proto__);
  // Object {}          function Empty() {}
  console.log(Object.prototype, Object.__proto__);
  function F() {}
  // F {}              function Empty() {}
  console.log(F.prototype, F.__proto__);

Anda mungkin pengsan, mari pecahkannya.

prototaip
Format keluaran prototaip ialah: prototaip nama pembina
Mula-mula, mari kita lihat apakah output Object.prototype?
Objek {} -> Objek sebelumnya ialah nama pembina, dan yang terakhir mewakili prototaip Berikut ialah {}, yang merupakan contoh objek Objek (objek kosong)
Kemudian kita akan memahami maksud F {} F ialah nama pembina, dan prototaip juga merupakan objek kosong

  // 再来看看由构造函数构造出来的实例
  var o = new Object(); // var o = {};
  // undefined       Object {}
  console.log(o.prototype, o.__proto__);
  function F() {}
  var i = new F();
  // undefined       F {}
  console.log(i.prototype, i.__proto__);

Mari kita mendalami sedikit dan tentukan prototaip F untuk melihat apa yang berlaku?

  function F() {}
  F.prototype.a = function() {};
  var i = new F();
  // undefined       F {a: function}
  console.log(i.prototype, i.__proto__);

Dengan cara ini, kita dapat melihat dengan jelas bahawa i dibina daripada F, dan prototaipnya ialah {a: function}, yang bermaksud bahawa prototaip objek kosong asal mempunyai kaedah baharu

Mari kita ubah keadaan lain, apa yang akan berlaku jika kita menutup sepenuhnya prototaip F?
 

function F() {}
  F.prototype = {
    a: function() {}
  };
  var i = new F();
  // undefined       Object {a: function}
  console.log(i.prototype, i.__proto__);
  

Hei~ Mengapa ia menunjukkan bahawa saya dibina daripada Object? Itu tidak betul! Oleh kerana kami menimpa sepenuhnya prototaip F, kami sebenarnya menentukan prototaip sebagai objek {a: function}, tetapi ini akan menyebabkan maklumat pembina asal hilang dan menjadi pembina yang ditentukan oleh objek {a: function}.
Jadi apakah pembina objek {a: function}?
Kerana objek {a: function} sebenarnya adalah relatif kepada

  var o = {a: function() {}} // new了一个Object

Maka sudah tentu pembina o ialah Objek

Mari kita betulkan kesilapan ini

  function F() {}
  F.prototype = {
    a: function() {}
  }
  // 重新指定正确的构造函数
  F.prototype.constructor = F;
  var i = new F();
  // undefined       F {a: function, constructor: function}
  console.log(i.prototype, i.__proto__);

Kini anda boleh mendapatkan maklumat prototaip yang betul sekali lagi~

Rantai Prototaip

Kemudian mari kita lihat apakah rantai prototaip?

Ringkasnya, ia adalah sama dengan hubungan warisan (rantaian) dalam OOP Anda naik lapisan demi lapisan sehingga anda mencapai Object.prototype

Perkara yang paling penting ialah mengetahui perkara dalam JS adalah objek (contoh). Semuanya dalam JS adalah objek Perkara lain yang perlu difahami ialah setiap objek mempunyai prototaip!

Kemudian mari kita buktikan:

  Object // 这是一个函数, 函数是 Function 的实例对象, 那么就是由 Function 构造出来的
  Object.__proto__ == Function.prototype // 那么Object的原型, true
  // 这个是一个普通对象了, 因此属于 Object 的实例
  Function.prototype.__proto__ == Object.prototype // true
  // 这已经是原型链的最顶层了, 因此最终的指向 null
  Object.prototype.__proto__ == null // true

  Function // 这也是一个函数, 没错吧!
  Function.__proto__ == Function.prototype // true
  
  function A() {} // 这是一个自定义的函数, 终归还是一个函数, 没错吧! 
  A.__proto__ == Function.prototype // 任何函数都是 Function 的实例, 因此A的原型是?
  var a = new A()
  a.__proto__ == A.prototype // 实例a是由A构造函数构造出来的, 因此a的原型是由A的prototype属性定义的
  A.prototype.__proto__ == Object.prototype // 普通对象都是 Object 的示例

Prototaip dan __proto__

Setiap objek mengandungi __proto__, yang menunjuk kepada "prototaip" objek ini.
Perkara yang sama ialah setiap fungsi mengandungi prototaip Apakah yang dilakukan oleh objek prototaip ini?
Mari kita lihat kod berikut, menggunakan pembina untuk mencipta objek (di atas adalah untuk mencipta objek dalam bentuk literal).

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);

Cukup fikirkan, apakah yang ditunjukkan oleh __proto__ objek foo ini?

Objek yang mengandungi sifat pembina? Tidak kira jika anda tidak memahaminya dengan baik Cuma cetak atribut prototaip fungsi Foo dan bandingkannya.

function Foo(){};
var foo = new Foo();
console.log(foo.__proto__);
console.log(Foo.prototype);
console.log(foo.__proto__ === Foo.prototype);

Ternyata __proto__ objek baharu foo hanya menunjuk kepada prototaip fungsi Foo.

JS这么设计有何意义了？回忆下上面说的，在JS的世界中，对象不是根据类（模具）创建出来的，而是从原型（另一个对象）衍生出来的。

当我们执行new操作创建一个新的对象时，先不深入new操作的具体实现，但有一点我们是肯定的——就是为新对象的__proto__指向一个原型对象。

就刚才这段代码

function Foo(){};
var foo = new Foo();

foo.__proto__到底要指向谁了？你怎么不能指向Foo这个函数本身吧，虽然函数也是对象，这个有机会会详细讲。但如何foo.__proto__指向Foo固然不合适，因为Foo是一个函数，有很多逻辑代码，foo作为一个对象，继承逻辑处理没有任何意义，它要继承的是“原型对象”的属性。

所以，每个函数会自动生成一个prototype对象，由这个函数new出来的对象的__proto__就指向这个函数的prototype。

foo.__proto__ --> Foo.prototype

总结
说了这么多，感觉还是没完全说清楚，不如上一张图。我曾经参考过其他网友的图，但总觉得哪里没说清楚，所以我自己画了一张图，如果觉得我的不错，请点个赞！（老子可是费了牛劲才画出来）。

咱们就着这张图，记住如下几个事实：

1. 每个对象中都有一个_proto_属性。

JS世界中没有类（模具）的概念，对象是从另一个对象（原型）衍生出来的，所以每个对象中会有一个_proto_属性指向它的原型对象。（参考左上角的那个用字面量形式定义的对象obj，它在内存中开辟了一个空间存放对象自身的属性，同时生成一个_proto_指向它的原型——顶层原型对象。）

2. 每个函数都有一个prototype属性。

“构造函数”为何叫构造函数，因为它要构造对象。那么根据上面第一条事实，构造出来的新对象的_proto_属性指向谁了？总不能指向构造函数自身，虽然它也是个对象，但你不希望新对象继承函数的属性与方法吧。所以，在每个构造函数都会有一个prototype属性，指向一个对象作为这个构造函数构造出来的新对象的原型。

3. 函数也是对象。

每个函数都有一些通用的属性和方法，比如apply()/call()等。但这些通用的方法是如何继承的呢？函数又是怎么创建出来的呢？试想想，一切皆对象，包括函数也是对象，而且是通过构造函数构造出来的对象。那么根据上面第二条事实，每个函数也会有_proto_指向它的构造函数的prototype。而这个构造函数的函数就是Function，JS中的所有函数都是由Function构造出来的。函数的通用属性与方法就存放在Function.prototype这个原型对象上。