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操做,這樣鏈條就會中斷，只能在原型上擴展屬性。

明天繼續聊繼承！

歡迎吐槽！