深刻理解javascript原型和閉包（5）——instanceof

又介紹一個老朋友——instanceof。

對於值類型，你能夠經過typeof判斷，string/number/boolean都很清楚，可是typeof在判斷到引用類型的時候，返回值只有object/function，你不知道它究竟是一個object對象，仍是數組，仍是new Number等等。

這個時候就須要用到instanceof。例如：

上圖中，f1這個對象是被Foo建立，可是「f1 instanceof Object」爲何是true呢？

 

至於爲何過會兒再說，先把instanceof判斷的規則告訴你們。根據以上代碼看下圖：

Instanceof運算符的第一個變量是一個對象，暫時稱爲A；第二個變量通常是一個函數，暫時稱爲B。

Instanceof的判斷隊則是：沿着A的__proto__這條線來找，同時沿着B的prototype這條線來找，若是兩條線能找到同一個引用，即同一個對象，那麼就返回true。若是找到終點還未重合，則返回false。

按照以上規則，你們看看「 f1 instanceof Object 」這句代碼是否是true？ 根據上圖很容易就能看出來，就是true。

 

經過上以規則，你能夠解釋不少比較怪異的現象，例如：

這些看似很混亂的東西，答案卻都是true，這是爲什麼？

正好，這裏也接上了我們上一節說的「亂」。

上一節我們貼了好多的圖片，其實那些圖片是能夠聯合成一個總體的，即：

看這個圖片，千萬不要嫌煩，必須一條線一條線挨着分析。若是上一節你看的比較仔細，再結合剛纔我們介紹的instanceof的概念，相信能看懂這個圖片的內容。

看看這個圖片，你也就知道爲什麼上面三個看似混亂的語句返回的是true了。

 

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

重點就這樣被這位老朋友給引出來了——繼承——原型鏈。

即，instanceof表示的就是一種繼承關係，或者原型鏈的結構。請看下節分解。

（注：本節的圖片來源於http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/figure1.jpg）

---------------------------------------------------------------------------

本文已更新到《深刻理解javascript原型和閉包系列》的目錄，更多內容可參見《深刻理解javascript原型和閉包系列》。

另外，歡迎關注個人微博。

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》