1. instanceof的用法

instanceof運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。

function Person() {}
function Person2() {}

const usr = new Person();

console.log(usr instanceof Person); // true
console.log(usr instanceof Object); // true

console.log(usr instanceof Person2); // false

如上代碼，定義了兩個(gè)構(gòu)造函數(shù)，Person和Person2，又實(shí)用new操作創(chuàng)建了一個(gè)Person的實(shí)例對(duì)象usr。

實(shí)用instanceof操作符，分別檢驗(yàn)構(gòu)造函數(shù)的prototype屬性是否在usr這個(gè)實(shí)例的原型鏈上。

當(dāng)然，結(jié)果顯示，Person和Object的prototype屬性在usr的原型鏈上。usr不是Person2的實(shí)例，故Person2的prototype屬性不在usr的原型鏈上。

2. 實(shí)現(xiàn)instanceof

明白了instanceof的功能和原理后，可以自己實(shí)現(xiàn)一個(gè)instanceof同樣功能的函數(shù)：

function myInstanceof(obj, constructor) {
    // obj的隱式原型
    let implicitPrototype = obj?.__proto__;
    // 構(gòu)造函數(shù)的原型
    const displayPrototype = constructor.prototype;
    // 遍歷原型鏈
    while (implicitPrototype) {
        // 找到，返回true
        if (implicitPrototype === displayPrototype) return true;
        implicitPrototype = implicitPrototype.__proto__;
    }
    // 遍歷結(jié)束還沒(méi)找到，返回false
    return false;
}

myInstanceof函數(shù)接收兩個(gè)參數(shù)：實(shí)例對(duì)象obj和構(gòu)造函數(shù)constructor。

首先拿到實(shí)例對(duì)象的隱式原型：obj.__proto__，構(gòu)造函數(shù)的原型對(duì)象constructor.prototype。

接著，就可以通過(guò)不斷得到上一級(jí)的隱式原型：

implicitPrototype = implicitPrototype.__proto__;

來(lái)遍歷原型鏈，尋找displayPrototype是否在原型鏈上，若找到，返回true。

當(dāng)implicitPrototype為null時(shí)，結(jié)束尋找，沒(méi)有找到，返回false。

原型鏈其實(shí)就是一個(gè)類(lèi)似鏈表的數(shù)據(jù)結(jié)構(gòu)。

instanceof做的事，就是在鏈表上尋找有沒(méi)有目標(biāo)節(jié)點(diǎn)。從表頭節(jié)點(diǎn)開(kāi)始，不斷向后遍歷，若找到目標(biāo)節(jié)點(diǎn)，返回true。遍歷結(jié)束還沒(méi)找到，返回false。

3. 驗(yàn)證

寫(xiě)一個(gè)簡(jiǎn)單的實(shí)例驗(yàn)證一下自己實(shí)現(xiàn)的instanceof：

function Person() {}
function Person2() {}

const usr = new Person();

function myInstanceof(obj, constructor) {
    let implicitPrototype = obj?.__proto__;
    const displayPrototype = constructor.prototype;
    while (implicitPrototype) {
        if (implicitPrototype === displayPrototype) return true;
        implicitPrototype = implicitPrototype.__proto__;
    }
    return false;
}

myInstanceof(usr, Person); // true
myInstanceof(usr, Object); // true

myInstanceof(usr, Person2); // false
myInstanceof(usr, Function); // false

myInstanceof(usr.__proto__, Person); // false
usr.__proto__ instanceof Person; // false

可以看到，myInstanceof正確得出了結(jié)果。

有趣的是，usr.__proto__ instanceof Person返回false，說(shuō)明obj instanceof constructor檢測(cè)的原型鏈，不包括obj節(jié)點(diǎn)本身。

JavaScript常見(jiàn)手寫(xiě)代碼：

「GitHub—code-js」

到此這篇關(guān)于JavaScript 手動(dòng)實(shí)現(xiàn)instanceof的文章就介紹到這了,更多相關(guān)JavaScript instanceof內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論