從instanceof身上深入理解原型原型鏈

今天將延續這篇文章，借助乙個老朋友——instanceof運算子，將通過它以及結合多次講的原型/原型鏈經典圖來深入理解原型/原型鏈。

對於原始型別（primitive type）的值，即string/number/boolean，你可以通過typeof判斷其型別，但是typeof在判斷到合成型別（complex type）的值的時候，返回值只有object/function，你不知道它到底是乙個object物件，還是陣列，也不能判斷出object 下具體是什麼細分的型別，比如array、date、regexp、error等。

官方對instanceof運算子的解釋是返回乙個布林值，表示物件是否為某個建構函式的例項。比如：

function
foo() {}
var f1 = new foo();
console.log(f1 instanceof foo);  // true
console.log(f1 instanceof
object);  // true
複製**

上面**中，物件f1是建構函式foo的例項，所以返回true，但是「f1 instanceof object」為什麼也是true呢？

instanceof運算子的左邊是例項物件，右邊是建構函式，左邊變數暫稱為a，右邊變數暫稱為b。它會檢查右邊建構函式的原型物件（prototype），是否在左邊物件的原型鏈上。

通俗一點來講，instanceof的判斷規則是：instanceof會檢查整個原型鏈，將沿著a的__proto__這條線來一直找，同時沿著b的prototype這條線來一直找，直到能找到同乙個引用，即同乙個物件，那麼就返回true。如果找到終點還未重合，則返回false。即上圖中的f1-->__proto__和foo-->prototype指向同乙個物件，console.log(f1 instanceof foo)為true。

按照以上規則，重新來看看「 f1 instanceof object 」這句**為什麼是true？根據上圖很容易就能看出來， f1-->__proto__-->__proto__和object-->prototype指向同乙個物件，console.log(f1 instanceof object)為true。

通過上面的規則，可以很好地解釋一些比較怪異的現象，例如：

console.log(object
instanceof
function);   // true
console.log(function
instanceof
object);   // true
console.log(function
instanceof
function);   // true
console.log(object
instanceof
object);   // true
複製**

這些就是這篇文章所講的看似很混亂的東西，現在知道為何了吧。

但還有一種特殊情況，就是左邊物件的原型鏈上，只有null物件。這時，instanceof判斷會失真。

var obj = object.create(null);
typeof obj // "object"
object.create(null) instanceof
object
// false
複製**

上面**中，object.create(null)返回乙個新物件obj，它的原型是null（object.create後續會有專門文章介紹）。右邊的建構函式object的prototype屬性，不在左邊的原型鏈上，因此instanceof就認為obj不是object的例項。但是，只要乙個物件的原型不是null，instanceof運算子的判斷就不會失真。

說到這裡，繼續貼上這幅原型/原型鏈的經典圖，是否現在看起來沒那麼複雜了呢。

如果這篇文章你看的比較仔細，再結合剛才介紹的instanceof的概念規則，相信能看懂上面這張圖的內容了。

那麼問題又出來了。instanceof這樣設計，到底有什麼用？到底instanceof想表達什麼呢？

這就要重點講講繼承了，即instanceof表示的就是一種繼承關係，或者原型鏈的結構，請看後續文章介紹。

如果覺得文章對你有些許幫助，歡迎在我的github部落格點讚和關注，感激不盡！

從instanceof身上深入理解原型原型鏈

從大師身上反思

反思設計從大師身上反思

從Kenshi身上能夠學到什麼

從instanceof身上深入理解原型 原型鏈

從大師身上反思

反思設計 從大師身上反思

從Kenshi身上能夠學到什麼

相關推薦

從instanceof身上深入理解原型原型鏈

反思設計從大師身上反思