Javascript 原型鏈

先來一張圖看看幾個名詞的關係 構造函數、原型、實例

原諒我的狂草字體，我手寫比用電腦畫快。

今天我們只說原型鏈，所以接下來我就圍繞着原型鏈的幾個部分說起。

這個大家都很熟悉了，首字母大寫的函數我們都可以作爲構造函數，不是說小寫的就不能new，也是可以的，暫時說成約定俗成吧！

        // 構造函數
        function Fn() {}
        //原型對象
        console.log(Fn.prototype)
          //new
        let fn = new Fn() 
        //實例
        console.log(fn)

代碼部分結束了，今天我們就用這4行代碼描述一下上圖也就是原型鏈的來龍去脈。

每個函數都有一個屬性prototype,借用**Function.prototype** 屬性存儲了 Function 的原型對象。

驗證了我草圖構造函數.prototype指向原型對象

完整的log看一下

實例.__proto__也指向原型對象

從log裏也能看出來

實例原型的constructor指向構造函數

最後再說構造函數 new關鍵字生成實例

手繪圖說完了，我們說正題 原型鏈，爲什麼再說原型鏈之前先畫了一個草圖，爲了幫助預熱理解。

每一個原型對象都有一個__proto__屬性，這個是我們在代碼中繼承的關鍵，也是衆多面試官所問的什麼是原型鏈

上圖可以看到，第一次__proto__找到了原型對象，第二次__proto__找到了Object實例對象，第三次null查找結束。

我們平時開發中用到了__proto__去查找鏈條中我們繼承的方法和屬性都在prototype（原型）上，所以不能在Fn.prototype = xxx操作,這樣鏈條就會中斷，只能在原型上擴展屬性。

明天繼續聊繼承！

歡迎吐槽！