理解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)在讓我們揭開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
讓我們畫一張內(nèi)存圖來(lái)分析一下:

內(nèi)存圖比較復(fù)雜,解釋一下:
程序本身是一個(gè)動(dòng)態(tài)的概念,隨著程序的執(zhí)行,Dog.prototype會(huì)不斷的改變。但是為了方便,我只畫了一張圖來(lái)表達(dá)這三次prototype引用的改變。在堆中,右邊是函數(shù)對(duì)象的內(nèi)存表示,中間的是函數(shù)對(duì)象的prototype屬性的指向,左邊的是函數(shù)對(duì)象創(chuàng)建的對(duì)象實(shí)例。其中函數(shù)對(duì)象指向prototype屬性的指針上寫了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之分片上傳,斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目實(shí)現(xiàn)詳解
在本篇文章里小編給大家整理了關(guān)于javascript之分片上傳,斷點(diǎn)續(xù)傳的實(shí)際項(xiàng)目實(shí)現(xiàn)的詳細(xì)內(nèi)容,有需要的朋友們學(xué)習(xí)下。2019-09-09原生JS綁定滑輪滾動(dòng)事件兼容常見(jiàn)瀏覽器
滑輪滾動(dòng)頁(yè)面的事件在網(wǎng)頁(yè)特效中進(jìn)場(chǎng)遇到,下面通過(guò)示例為大家介紹下原生JS綁定滑輪滾動(dòng)事件并兼容瀏覽器2014-06-06JavaScript常見(jiàn)的函數(shù)中的屬性與方法總結(jié)
當(dāng)定義和調(diào)用函數(shù)時(shí),JavaScript?函數(shù)對(duì)象會(huì)自動(dòng)具有一些特定的屬性,本文為大家總結(jié)了一些常見(jiàn)的屬性和方法,感興趣的小伙伴可以了解一下2023-05-05如何在指定的地方插入html內(nèi)容和文本內(nèi)容
本文為大家介紹個(gè)小技巧可以在指定的地方插入html內(nèi)容和文本內(nèi)容,示例如下,感興趣的朋友可以參考下2013-12-12jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法,涉及jQuery頁(yè)面元素遍歷與事件動(dòng)態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-04-04