我所理解的原型&原型鏈

1、題目

咱們先看一道題目

var F = function() {};   
    Object.prototype.a = function() {
        console.log('a');
    };

    Function.prototype.b = function() {
        console.log('b');
    }

    var f = new F();
    f.a(); 
    f.b();
    
    F.a(); 
    F.b(); 
複製代碼

2、解題關鍵

借用網絡上的圖片，看起來有點繞，待咱們一點一點理解。有如下幾點：

3、圖片解析

• __proto__ 是原型鏈的連接

• 經過 __proto__ 查找到prototype， prototype是原型的關鍵字

• var f = new F()
  f: 是實例對象
  F： 是構造函數
  f經過__proto__找到F.prototype,因此f.__proto__ === F.prototype

• 構造器的原型屬於對象 Object ，也就是說 F.prototype 是 new object 出來的。因此 F.prototype經過 __proto__ 能夠找到 Object.prototype
  即：F.prototype.__proto__ === Object.Prototype

• function Function() 是函數構造器
  Function.__proto__ === Function.prototype
Function.prototype 是對象,因此Function.prototype.__proto__ === Object.prototype

• 終極：Objecy.prototype.__proto__ === null

4、題目解析

再回過頭來看上面的題目

• f.a()，f 是實例對象， f沒有a屬性，經過f.__proto__找到原型F.prototype，F.prototype上也沒有a屬性，繼續經過 F.prototype.__proto__找到Object.prototype,發現a屬性，因此輸出a
• f.b()，同理找到 Object.prototype,發現Object.prototype也沒有b屬性，繼續經過__proto__查找 到了null，因此b函數不存在，瀏覽器報錯。 則 F.a()，F.b()也不會執行
• 若註釋了 f.b()，執行F.a()。F是函數，F上沒有a屬性，經過__proto__找到Function.prototype，發現Function.prototype沒有a屬性，繼續經過__proto__,找到Object.prototype,找到了a屬性，輸出a
• 若註釋了 f.b()，執行F.b()。同理找到Function.prototype，發現b屬性，輸出b

5、參考資料

JS 原型與原型鏈

若是有理解不對的地方，歡迎大佬指正！