JavaScript 手動實現instanceof的方法

Posted on by

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。

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

implicitPrototype = implicitPrototype.__proto__;

來遍歷原型鏈，尋找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常見手寫代碼：

「GitHub—code-js」

到此這篇關於JavaScript 手動實現instanceof的文章就介紹到這瞭,更多相關JavaScript instanceof內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：