圖解JavaScript原型鏈繼承

JavaScript是基於原型鏈的繼承的，忘掉類的繼承，從原型鏈入手。

普通對象 函數對象

• JavaScrip只有一種結構：對象
• 經過new Function()建立的對象都是函數對象，其餘都是普通對象。
• 每一個對象都有 __proto__屬性，，而且該屬性指向原型對象（prototype），但只有函數對象纔有 prototype 屬性

prototype和 proto 的概念

prototype是函數的一個屬性（函數都有prototype屬性）指向原型對象。 _ proto_ 是一個對象擁有的內置屬性（請注意：prototype是函數的內置屬性，_ proto_ 是對象的內置屬性），_ proto_ 是JS內部使用尋找原型鏈的屬性。簡單來講，在 javascript 中每一個對象都會有一個 _ proto _，方法也是對象，也有這個屬性。 屬性，當咱們訪問一個對象的屬性時，若是這個對象內部不存在這個屬性，那麼他就會去 _ proto _ 裏找這個屬性，這個 _ proto _ 又會有本身的 _ proto _，因而就這樣一直找下去，也就是咱們平時所說的原型鏈的概念.

（上圖引用自其餘博客以方便理解）

原型鏈

• 屬性查找機制: 當查找對象的屬性時，若是實例對象自身不存在該屬性，則沿着原型鏈往上一級查找，找到時則輸出，不存在時，則繼續沿着原型鏈往上一級查找，直至最頂級的原型對象Object.prototype，如仍是沒找到，則輸出undefined。
• 屬性修改機制: 只會修改實例對象自己的屬性，若是不存在，則進行添加該屬性，若是須要修改原型的屬性時，則能夠用: b.prototype.x = 2；可是這樣會形成全部繼承於該對象的實例的屬性發生改變。

表達式：L instance R;

則運算結果是： L.__proto__.__proto__... === R.prototype ?

運算符左邊最終結果是 instanceof運算時會遞歸查找L的原型鏈，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到頂層爲止。

運算符右邊只是找出了 右邊操做數的prototype是什麼。

因此一句話總結：instanceof檢測左側操做數的__proto__原型鏈上，是否存在右側的prototype原型。
複製代碼

總結

• Function的兩個指針prototype和_ proto _ 均指向 Function.protptype
• 構造函數經過prototype屬性獲取原型對象。
• 原型對象經過constructor屬性獲取構造函數
• 對象經過__proto__（非標準,隱式原型）屬性獲取原型對象。
• 構造函數的prototype（標準，顯式原型）屬性指向上一級原型對象直到Object原型對象。
• Object.prototype.__proto__指向null
• 全部的對象最終都繼承於Object.prototype，而全部的構造函數，包括Function（）{} Object(){}在內，又均可以看作是Function的實例
• Obj.hasOwnProperty()能夠判斷某個對象自己是否有某個屬性，函數也是對象。