JavaScript 手動實現instanceof的方法

1. instanceof的用法

instanceof運算子用於檢測建構函式的 prototype屬性是否出現在某個 例項物件的 原型鏈上。

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

如上程式碼，定義了兩個建構函式， Person和 Person2，又實用 new操作建立了一個 Person的例項物件 usr。

實用 instanceof操作符，分別檢驗 建構函式的 prototype屬性是否在 usr這個例項的原型鏈上。

當然，結果顯示， Person和 Object的 prototype屬性在 usr的原型鏈上。 usr不是 Person2的例項，故 Person2的 prototype屬性不在 usr的原型鏈上。

2. 實現instanceof

明白了 instanceof的功能和原理後，可以自己實現一個 instanceof同樣功能的函式：

function myInstanceof(obj, constructor) {
    // obj的隱式原型
    let implicitPrototype = obj?.__proto__;
    // 建構函式的原型
    const displayPrototype = constructor.prototype;
    // 遍歷原型鏈
    while (implicitPrototype) {
        // 找到，返回true
        if (implicitPrototype === displayPrototype) return true;
        implicitPrototype = implicitPrototype.__proto__;
    }
    // 遍歷結束還沒找到，返回false
    return false;
}

myInstanceof函式接收兩個引數：例項物件 obj和建構函式 constructor。

首先拿到例項物件的隱式原型： obj.__proto__，建構函式的原型物件 constructor.prototype。

接著，就可以通過不斷得到上一級的 隱式原型：

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

當 implicitPrototype為 null時，結束尋找，沒有找到，返回 false。

原型鏈其實就是一個類似 連結串列的資料結構。

instanceof做的事，就是在連結串列上 尋找有沒有目標節點。從表頭節點開始，不斷向後遍歷，若找到目標節點，返回 true。遍歷結束還沒找到，返回 false。

3. 驗證

寫一個簡單的例項驗證一下自己實現的 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正確得出了結果。

有趣的是， usr.__proto__ instanceof Person返回 false，說明 obj instanceof constructor檢測的原型鏈， 不包括 obj節點本身。

JavaScript常見手寫程式碼：

到此這篇關於JavaScript 手動實現instanceof的文章就介紹到這了,更多相關JavaScript instanceof內容請搜尋指令碼之家以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援指令碼之家！