先來一張圖看看幾個(gè)名詞的關(guān)系 構(gòu)造函數(shù)、原型、實(shí)例

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

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

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

// 構(gòu)造函數(shù)function Fn() {}//原型對(duì)象console.log(Fn.prototype)//newlet fn = new Fn() //實(shí)例console.log(fn)

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

每個(gè)函數(shù)都有一個(gè)屬性prototype,借用**Function.prototype**?屬性存儲(chǔ)了?Function?的原型對(duì)象。

驗(yàn)證了我草圖構(gòu)造函數(shù).prototype指向原型對(duì)象

完整的log看一下

實(shí)例.__proto__也指向原型對(duì)象

從log里也能看出來

實(shí)例原型的constructor指向構(gòu)造函數(shù)

最后再說構(gòu)造函數(shù) new關(guān)鍵字生成實(shí)例

手繪圖說完了，我們說正題 原型鏈，為什么再說原型鏈之前先畫了一個(gè)草圖，為了幫助預(yù)熱理解。

每一個(gè)原型對(duì)象都有一個(gè)__proto__屬性，這個(gè)是我們在代碼中繼承的關(guān)鍵，也是眾多面試官所問的什么是原型鏈

上圖可以看到，第一次__proto__找到了原型對(duì)象，第二次__proto__找到了Object實(shí)例對(duì)象，第三次null查找結(jié)束。

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

明天繼續(xù)聊繼承！

歡迎吐槽！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。