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
和Perwww.cppcns.com
,又實用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,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內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!