藕斷絲連，JavaScript中的原型與原型鏈-js教程-PHP中文網

藕斷絲連，JavaScript中的原型與原型鏈

灭绝师太

發布： 2021-11-04 12:00:01

原創

1391 人瀏覽過

藕斷絲連，JavaScript中的原型與原型鏈

原型與原型鏈關係貫穿JavaScript中的對象，而JavaScript中萬物皆對象，所以原型與原型鍊是比較重要的概念，今天就帶大家一起來看看JavaScript中的原型與原型鏈。

一、了解概念(知道有這兩個名詞即可)

原型（prototype）
#原型鏈（__proto__）

二、了解從屬關係

prototype  => 函数的一个属性         ： 同时也是一个 对象{} (称之为原型对象亦可)

__proto__ => 对象Object的一个属性   ： 同时也是一个 对象{}   (__proto__也就是[[Prototype]])

登入後複製

#註：物件的__proto__保存著該物件的建構子的prototype

# a.宣告一個建構函數

    function Test() { }
  
    //prototype 是函数的一个属性
    console.dir(Test);
    console.log(Test.prototype);
    // Test.prototype也是一个对象
    console.log(typeof Test.prototype);

登入後複製

b.宣告一個物件

    const test = new Test();
    
    console.log(test);
    //验证test为一个对象
    console.log(typeof test);
    //__proto__是对象的一个属性
    console.log(test.__proto__);
    console.log(Test.prototype);
    //对象的__proto__属性存储着Test.prototype
    console.log(test.__proto__ === Test.prototype);
    // test.__proto__也是一个对象
    console.log(typeof test.__proto__);

登入後複製

function Test() {}
console.log(Test.prototype); //验证函数是否有prototype属性

let test = new Test();
console.dir(test.__proto__); //验证对象是否有__proto__属性
console.log(test.__proto__ === Test.prototype);//验证对象的__ptoto__是否保存着该对象的构造函数的prototype

console.log(Test.prototype.__proto__ === Object.prototype);//Test.prototype（是一个对象）的__proto__属性是否是对象的原型属性
console.log(Object.prototype.__proto__);//原型链的顶层没有__proto__属性 null

登入後複製

#b.三、深入認識原型鏈、原型與原型繼承

    function Test(){}
    let test =new Test();
    test.a= 10;
    //test.__proto__ === test.constructor.prototype
    test.__proto__.b1=11;//对象的__proto__属性存储着对象构造函数的prototype属性
    Test.prototype.b2=11;
   
    test.__proto__.__proto__.c1=12;
    Object.prototype.c2=12;
    console.log(test);
    console.log(Test.prototype);
    console.log(Object.prototype.__proto__);
   
    /*逐层解析
    * test{
    *        a = 10
    *        __proto__:Test.prototype{
    *                 b = 11
    *                 __proto__:Object.prototype{
    *                           c = 12
    *                           X__prototype__:null
    *                 }         
    *        }
    *     }
    *
    * */

登入後複製

#四、總結

不建議直接用__proto__ 存取。
可以簡單概括為以prototype#為原型節點, __proto__為原型鏈條。
每個實例物件（object）都有一個私有屬性（稱為__proto__ ）指向它的建構函式的原型物件（prototype）。這個原型物件也有一個自己的原型物件（__proto__），層層向上直到一個物件的原型物件為 null。根據定義，null 沒有原型，並作為這個原型鏈中的最後一個環節。
someObject.[[Prototype]] 符號是用來指someObject 的原型,someObject.[[Prototype]]# === __proto__#( JavaScript的非標準但許多瀏覽器實現的屬性)。
Object.prototype#屬性表示Object 的原型對象。
被建構函數所建立的實例物件的[[Prototype]] 指向func #的prototype 屬性。