JavaScript 原型鏈

原型鏈是JavaScript中最重要的概念之一。

對於它的深刻理解是必須的，否則開發工作將難以進行。

很多初學者感覺某一個概念難以理解，其實並不是概念本身有多難。

而是對與此概念相關的周邊知識沒有良好的掌握。

理解原型鏈關鍵在於對於prototype 與 __proto__掌握。

兩個知識點可以參閱如下兩篇文章：

（1）.prototype參閱JavaScript prototype 原型一章節。

（2）.__proto__參閱 __proto__屬性一章節。

一.什麼是原型鏈：

對於鐵鏈大家應該很熟悉，圖示如下：

上面是生活中常見的鐵鏈，通過某種方式將鐵環串接在一起。

同樣的道理，原型鏈是通過某種方式將prototype原型物件串接起來。

二.如何將原型串接起來：

建構函式具有prototype原型物件，它所建立的例項會繼承此原型物件。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,address){
  this.webName=webName;
  this.address=address;
}  
Antzone.prototype.age=6;
let ant=new Antzone("螞蟻部落","青島市南區");
console.log(ant.age);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.建構函式Antzone具有prototype原型物件，併為此物件新增一個age屬性。

（2）.由建構函式建立的物件ant會繼承原型中的屬性/方法。

（3）.物件例項還具有__proto__屬性，它指向建立此物件例項的建構函式的prototype原型物件。

程式碼驗證如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(webName,address){
  this.webName=webName;
  this.address=address;
}  
Antzone.prototype.age=6;
let ant=new Antzone("螞蟻部落","青島市南區");
console.log(ant.__proto__===Antzone.prototype);

程式碼執行效果截圖如下：

返回值為true，印證了結論的正確性，圖示如下：

ant通過__proto__屬性指向建構函式的原型物件。

原型物件也是一個普通物件，也具有__proto__屬性，指向建立原型物件的建構函式的prototype物件。

簡單圖示如下：

這樣一層一層將原型物件串接成一個原型鏈，上面僅是一個演示，還可以更長。

當在一個物件上查詢指定屬性或者方法的時候，如果沒有查詢到，那麼就會在原型鏈上一層一層查詢。

原型鏈的最後的終點是Object.prototype，因為Object.prototype.__proto__指向null。