快捷導(dǎo)航

JS前端攻堅淺析instanceof實現(xiàn)原理

更新時間：2022年12月14日 16:26:16 作者：一只大加號

這篇文章主要為大家介紹了JS前端攻堅淺析instanceof實現(xiàn)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

無論是平時開發(fā)還是學(xué)習(xí)中，對于類型的判斷總是非常的重要，常見的類型判斷方法有很多，對于每種比較常用的api我們需要對其進行一定的了解，才能更好的判斷其中的實現(xiàn)方法，對Js的了解程度才能更深，這篇文章帶大家了解一下instanceof的實現(xiàn)

instanceof的實現(xiàn)

instanceof 運算符用于檢測構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個實例對象的原型鏈上（來自MDN）

我們先來看下instanceof的用法，有點類似于對于一個父類，生成一份子類的實例，通過new的方式就可以實現(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

要判斷一個對象是否存在某個實例對象的原型上，我們的c1是通過new出來的，可以對應(yīng)我們圖中的c1，通過畫出來的原型鏈可以看到，如果三者之間形成一個閉環(huán)，那么證明就是存在同一個原型鏈中

我們傳入c1和構(gòu)造函數(shù)Car，通過比對c1的proto和Car的prototype，如果兩者相等，則符合在同一個原型鏈上，那么instaceof返回true

如果不相等，那么按照原型鏈的規(guī)則,(proto = proto.__proto__),繼續(xù)向上層進行尋找,，繼續(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的原型沒有列舉出來，因為往上走的邏輯也是同樣的while中的判斷，我們只要找出了proto==prototype和 proto = proto.__proto__這兩個條件，就能很完美的寫出instance的函數(shù)方式

以上就是JS前端攻堅淺析instanceof實現(xiàn)原理的詳細(xì)內(nèi)容，更多關(guān)于JS前端instanceof原理的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: