深入理解javascript原型和閉包(5)——instanceof

王福朋發表於2014-09-18

又介紹一個老朋友——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原始碼解讀

相關文章