1. 程式人生 > 程式設計 >JavaScript 手動實現instanceof的方法

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

如上程式碼,定義了兩個建構函式,PersonPerwww.cppcns.com

son2,又實用new操作創建了一個Person的例項物件usr

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

當然,結果顯示,PersonObjectprototype屬性在usr的原型鏈上。usr不是Person2的例項,故Person2prototype屬性不在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

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

implicitPrototype = implicitPrototype.__proto__;

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

implicitPrototypenull時,結束尋找,沒有找到,返回false

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

instanceof

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

3. 驗證

寫一個簡單的例項驗證一下自己實現的instanceof

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

const usr = new Person();

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

myInstanceof(usr,Person); // true
myIwww.cppcns.comnstanceof(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節點本身。

常見手寫程式碼:

「—code-」

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