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

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

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

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

// 構造函數function Fn() {}//原型對象console.log(Fn.prototype)//newlet 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操作,這樣鏈條就會中斷，只能在原型上擴展屬性。

明天繼續聊繼承！

歡迎吐槽！

總結

以上是生活随笔為你收集整理的Javascript 原型链的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。