理解Javascript_07_理解instanceof實(shí)現(xiàn)原理
更新時(shí)間：2010年10月15日 23:49:36 作者：
在《Javascript類型檢測(cè)》一文中講到了用instanceof來(lái)用做檢測(cè)類型，讓我們來(lái)回顧一下
那么instanceof的這種行為到底是如何實(shí)現(xiàn)的呢,現(xiàn)在讓我們揭開(kāi)instanceof背后的迷霧。
instanceof原理
照慣例，我們先來(lái)看一段代碼：
復(fù)制代碼 代碼如下:
function Cat(){}
Cat.prototype = {}
function Dog(){}
Dog.prototype ={}
var dog1 = new Dog();
alert(dog1 instanceof Dog);//true
alert(dog1 instanceof Object);//true
Dog.prototype = Cat.prototype;
alert(dog1 instanceof Dog);//false
alert(dog1 instanceof Cat);//false
alert(dog1 instanceof Object);//true;
var dog2= new Dog();
alert(dog2 instanceof Dog);//true
alert(dog2 instanceof Cat);//true
alert(dog2 instanceof Object);//true
Dog.prototype = null;
var dog3 = new Dog();
alert(dog3 instanceof Cat);//false
alert(dog3 instanceof Object);//true
alert(dog3 instanceof Dog);//error
讓我們畫(huà)一張內(nèi)存圖來(lái)分析一下：
內(nèi)存圖比較復(fù)雜，解釋一下：
程序本身是一個(gè)動(dòng)態(tài)的概念，隨著程序的執(zhí)行，Dog.prototype會(huì)不斷的改變。但是為了方便，我只畫(huà)了一張圖來(lái)表達(dá)這三次prototype引用的改變。在堆中，右邊是函數(shù)對(duì)象的內(nèi)存表示,中間的是函數(shù)對(duì)象的prototype屬性的指向，左邊的是函數(shù)對(duì)象創(chuàng)建的對(duì)象實(shí)例。其中函數(shù)對(duì)象指向prototype屬性的指針上寫(xiě)了dog1,dog2,dog3分別對(duì)應(yīng)Dog.prototype的三次引用改變。它們和棧中的dog1,dog2,dog3也有對(duì)應(yīng)的關(guān)系。(注：關(guān)于函數(shù)對(duì)象將在后續(xù)博文中講解)
來(lái)有一點(diǎn)要注意，就是dog3中函數(shù)對(duì)象的prototype屬性為null,則函數(shù)對(duì)象實(shí)例dog3的內(nèi)部[[prototype]]屬性將指向Object.prototype,這一點(diǎn)在《理解Javascript_06_理解對(duì)象的創(chuàng)建過(guò)程》已經(jīng)講解過(guò)了。
結(jié)論
根據(jù)代碼運(yùn)行結(jié)果和內(nèi)存結(jié)構(gòu)，推導(dǎo)出結(jié)論：
instanceof 檢測(cè)一個(gè)對(duì)象A是不是另一個(gè)對(duì)象B的實(shí)例的原理是：查看對(duì)象B的prototype指向的對(duì)象是否在對(duì)象A的[[prototype]]鏈上。如果在，則返回true,如果不在則返回false。不過(guò)有一個(gè)特殊的情況，當(dāng)對(duì)象B的prototype為null將會(huì)報(bào)錯(cuò)(類似于空指針異常)。
這里推薦一篇文章，來(lái)自于歲月如歌，也是關(guān)于instanceof原理的，角度不同，但有異曲同工之妙。
相關(guān)文章
JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)班級(jí)抽簽小程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
當(dāng)頁(yè)面上存在一個(gè)圖片元素時(shí)如：<img src='xxxx' alt="" />,頁(yè)面加載中ie7、8跟chrome下圖片的onload事件非常奇怪，有后完全不觸發(fā)，有時(shí)候觸發(fā)后進(jìn)行改變某些元素的操作，操作結(jié)果無(wú)效。2011-07-07
JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義
本文主要介紹了JS實(shí)現(xiàn)HTML標(biāo)簽轉(zhuǎn)義及反轉(zhuǎn)義的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章介紹了Webpack4.x的四個(gè)核心概念介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決
這篇文章主要介紹了微信小程序swiper使用網(wǎng)絡(luò)圖片不顯示問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制
這篇文章主要為大家介紹了解決input輸入框僅支持輸入數(shù)字及兩位小數(shù)點(diǎn)的限制技巧示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽與碰撞檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
D3是目前最流行的JavaScript可視化圖表庫(kù)之一，D3的圖表類型非常豐富，并且支持SVG格式，因此應(yīng)用十分廣泛，也有很多圖表插件基于D3開(kāi)發(fā)，比如MetricsGraphics.js，在D3上構(gòu)建的數(shù)據(jù)圖表非常強(qiáng)大。2017-08-08
Redux官網(wǎng)上是這樣描述Redux，Redux is a predictable state container for JavaScript apps.（Redux是JavaScript狀態(tài)容器，提供可預(yù)測(cè)性的狀態(tài)管理）。目前Redux GitHub有5w多star，足以說(shuō)明 Redux 受歡迎的程度2021-06-06