一、原型鏈的概念

JavaScript是一門面向對象的編程語言，JavaScript 中的所有事物都是對象，并且對象與對象之間不是彼此獨立的，而是有“繼承”關系的。

這種“繼承”關系與Java或者C#中的繼承不同。Java或C#中是有類的概念的，子類繼承父類，通過extends關鍵字實現；而JavaScript中沒有真正意義上的class（類），但有與之類似的概念——原型對象；A繼承B，則A的“__proto__”屬性會指向B的“prototype”屬性，從而有以下示意圖：

?

A與B的關系為： A.__proto__?? ---------->?? B.prototype? ， 這句話的意思就是，A的原型（__proto__） 指向 B的原型對象（prototype）。

從A繼承B的示意圖中，我們看到一條具有指向關系的鏈，那么這是不是就是今天的主題——原型鏈 呢？答案是：不是

原型鏈要求末尾節點為null，B.prototype 不等于null，誰的原型會為null呢？答案是：Object對象的原型對象——Object.prototype，所以有以下示意圖：

?

所以，我把原型鏈的定義概括為：一群具有繼承關系的對象，通過__proto__屬性建立指向關系，并最終指向null，從而形成一條指向關系鏈，我們稱之為原型鏈。

二、為什么會有這樣的指向關系

現在，雖然知道了什么是原型鏈，但是為什么是這樣的指向關系，形成這樣的一條鏈，下面我們繼續來探討：

首先，了解概念：

①、對象的分類??? 如上文所說，JavaScript中所有的事物都是對象，而這些對象，可以分為兩大類：函數對象和普通對象。分類的依據是：是否具有原型對象（prototype），或者是否具有prototype屬性。函數對象具有prototype屬性，而普通對象沒有；

②、prototype??? 原型對象，對象中的所有屬性和方法，將繼承給子對象，由子對象們共享；

③、__proto__ ? ?原型。任何由繼承而來的對象，都有且僅有一個原型，并且由其__proto__屬性指明。

由于JavaScript中一切皆對象，并且這些對象最終都繼承自Object對象，所以在原型鏈中末尾的兩個節點，一定是Object.prototype和null。

三、對象

前文中，我們無數次提到了一個概念，那就是對象，什么是對象？對象即屬性和方法的集合，最典型的

var obj = {name: 'hjx',age: 24,sayHello: function() {console.log('Hello!');} }

obj既為一個對象，此對象有屬性name，age，有方法sayHello()。僅以“屬性和方法的集合”這幾個字的解釋，我們還很難理解JavaScript中的繼承關系和原理，所以，引入一下概念：

①、隱式屬性?? 由__proto__屬性指向的屬性和方法。

②、顯示屬性? ? 非__proto__屬性指向的屬性和方法，顯示屬性分為共享屬性和非共享屬性。

③、共享屬性??? 繼承給子對象，由子對象共享的屬性和方法。（共享：所有子對象的公共資源，一旦改變，所有子對象訪問時均已改變。本質上是在繼承的時候，所有子對象的__proto__屬性指向它，在內存中此屬性僅此一份，子對象和父對象均可去讀寫）

④、非共享屬性（本地屬性）??? 繼承給子對象時，由子對象單獨享有的屬性和方法，也成為本地屬性。（單獨享有：繼承時，在每個子對象的內存空間中都復制了一份，在子對象中各自獨立）

用一個等式來表達對象： 對象? =? 顯示屬性（共享屬性 + 本地屬性） + 隱式屬性

四、關系圖

關系圖總結：

①、子對象的__proto__屬性指向父對象的prototype屬性（子對象的原型指向父對象的原型對象）；

②、Object對象的__proto__屬性指向Function對象的prototype屬性（Object對象的原型指向Function對象的原型對象）；

③、Function對象的__proto__屬性指向自己的prototype屬性（Function對象的原型指向自己的原型對象）；

④、Function對象的prototype屬性的__proto__屬性指向Object的prototype屬性（Function對象的原型對象的原型指向Object對象的原型對象，因為，Function對象的原型對象是一個對象，由Object對象繼承而來）

⑤、Object對象的prototype屬性的__proto__屬性指向null（Object對象的原型對象的原型指向null，因為，一切對象的原型最終都指向Object對象的原型對象，然而Object對象的原型對象又是一個對象，JavaScript規定它指向null，所以Object對象的原型對象Object.prototype總是在原型鏈上，除null意外的頂端位置）

?

完~

轉載于:https://www.cnblogs.com/hjx-blog/p/9188526.html

總結

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

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