JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
正文
無(wú)論是平時(shí)開(kāi)發(fā)還是學(xué)習(xí)中，對(duì)于類型的判斷總是非常的重要，常見(jiàn)的類型判斷方法有很多，對(duì)于每種比較常用的api我們需要對(duì)其進(jìn)行一定的了解，才能更好的判斷其中的實(shí)現(xiàn)方法，對(duì)Js的了解程度才能更深，這篇文章帶大家了解一下instanceof的實(shí)現(xiàn)
instanceof的實(shí)現(xiàn)
instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上（來(lái)自MDN）
我們先來(lái)看下instanceof的用法，有點(diǎn)類似于對(duì)于一個(gè)父類，生成一份子類的實(shí)例，通過(guò)new的方式就可以實(shí)現(xiàn)
function Car(color) {
this.color = color;
}
const c1 = new Car('Honda', 'Accord', 1998);
console.log(c1 instanceof Car);
// expected output: true
console.log(c1 instanceof Object);
// expected output: true
要判斷一個(gè)對(duì)象是否存在某個(gè)實(shí)例對(duì)象的原型上，我們的c1是通過(guò)new出來(lái)的，可以對(duì)應(yīng)我們圖中的c1，通過(guò)畫(huà)出來(lái)的原型鏈可以看到，如果三者之間形成一個(gè)閉環(huán)，那么證明就是存在同一個(gè)原型鏈中
我們傳入c1和構(gòu)造函數(shù)Car，通過(guò)比對(duì)c1的proto和Car的prototype，如果兩者相等，則符合在同一個(gè)原型鏈上，那么instaceof返回true
如果不相等，那么按照原型鏈的規(guī)則,(proto = proto.__proto__),繼續(xù)向上層進(jìn)行尋找,，繼續(xù)while的判斷，直到找到最上層的原型鏈頂層null則停止尋找，所以這里的終止條件是proto==null
//console.log(c1 instanceof Car);
function _instanceof(l,r){
let proto = l.__proto__
let prototype = r.prototype
while(proto!=null){
if(proto==prototype){
return true
}else{
proto = proto.__proto__
}
}
}
這里只是列舉了原型鏈的一部分，還有Object的上層null以及function的原型沒(méi)有列舉出來(lái)，因?yàn)橥献叩倪壿嬕彩峭瑯拥膚hile中的判斷，我們只要找出了proto==prototype和 proto = proto.__proto__這兩個(gè)條件，就能很完美的寫出instance的函數(shù)方式
以上就是JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理的詳細(xì)內(nèi)容，更多關(guān)于JS前端instanceof原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例
下面小編就為大家分享一篇手機(jī)注冊(cè)發(fā)送驗(yàn)證碼倒計(jì)時(shí)的簡(jiǎn)單實(shí)例。具有很好的參考價(jià)值，一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助2017-11-11
JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兩表格里數(shù)據(jù)來(lái)回轉(zhuǎn)移的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
基于bootstrap實(shí)現(xiàn)bootstrap中文網(wǎng)巨幕效果
這篇文章主要介紹了基于bootstrap實(shí)現(xiàn)bootstrap中文網(wǎng)巨幕效果,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
JavaScrip實(shí)現(xiàn)PHP print_r的數(shù)功能（三種方法）
PHP print_r的函數(shù)很好用，可以用來(lái)打印數(shù)組、對(duì)象等的結(jié)構(gòu)與數(shù)據(jù)，可惜JavaScript并沒(méi)有原生提供類似的函數(shù)。不過(guò)我們可以試著自己來(lái)實(shí)現(xiàn)這個(gè)函數(shù)，下面提供一些方法與思路2013-11-11
js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上，將jQuery代碼改成js原生，并添加定時(shí)器（setInterval()和clearInterval()）的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12
javascript將中國(guó)數(shù)字格式轉(zhuǎn)換成歐式數(shù)字格式的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript將中國(guó)數(shù)字格式轉(zhuǎn)換成歐式數(shù)字格式的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)例子匯總
最近在用asp.net做項(xiàng)目的時(shí)候，遇到需要實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)的需求，度娘了一下，這里匯總一下幾個(gè)比較實(shí)用的例子，有需要的小伙伴可以參考下。2015-05-05
js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法
這篇文章主要介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了JS 數(shù)字轉(zhuǎn)換實(shí)現(xiàn)方法，需要的朋友可以參考下2013-12-12