JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理
正文
無論是平時開發(fā)還是學(xué)習(xí)中,對于類型的判斷總是非常的重要,常見的類型判斷方法有很多,對于每種比較常用的api我們需要對其進(jìn)行一定的了解,才能更好的判斷其中的實(shí)現(xiàn)方法,對Js的了解程度才能更深,這篇文章帶大家了解一下instanceof的實(shí)現(xiàn)
instanceof的實(shí)現(xiàn)
instanceof
運(yùn)算符用于檢測構(gòu)造函數(shù)的 prototype
屬性是否出現(xiàn)在某個實(shí)例對象的原型鏈上(來自MDN)
我們先來看下instanceof的用法,有點(diǎn)類似于對于一個父類,生成一份子類的實(shí)例,通過new的方式就可以實(shí)現(xiàn)
function Car(color) { this.color = color; } const c1 = new Car('Honda', 'Accord', 1998); console.log(c1 instanceof Car); // expected output: true console.log(c1 instanceof Object); // expected output: true
要判斷一個對象是否存在某個實(shí)例對象的原型上,我們的c1是通過new出來的,可以對應(yīng)我們圖中的c1,通過畫出來的原型鏈可以看到,如果三者之間形成一個閉環(huán),那么證明就是存在同一個原型鏈中
我們傳入c1和構(gòu)造函數(shù)Car,通過比對c1的proto和Car的prototype,如果兩者相等,則符合在同一個原型鏈上,那么instaceof返回true
如果不相等,那么按照原型鏈的規(guī)則,(proto = proto.__proto__
),繼續(xù)向上層進(jìn)行尋找,,繼續(xù)while的判斷,直到找到最上層的原型鏈頂層null則停止尋找,所以這里的終止條件是proto==null
//console.log(c1 instanceof Car); function _instanceof(l,r){ let proto = l.__proto__ let prototype = r.prototype while(proto!=null){ if(proto==prototype){ return true }else{ proto = proto.__proto__ } } }
這里只是列舉了原型鏈的一部分,還有Object的上層null以及function的原型沒有列舉出來,因?yàn)橥献叩倪壿嬕彩峭瑯拥膚hile中的判斷,我們只要找出了proto==prototype
和 proto = proto.__proto__
這兩個條件,就能很完美的寫出instance的函數(shù)方式
以上就是JS前端攻堅(jiān)淺析instanceof實(shí)現(xiàn)原理的詳細(xì)內(nèi)容,更多關(guān)于JS前端instanceof原理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別
這篇文章主要介紹了JavaScript函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-06-06利用Js的console對象,在控制臺打印調(diào)式信息測試Js的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄肑s的console對象,在控制臺打印調(diào)式信息測試Js的實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11javascript實(shí)現(xiàn)簡易數(shù)碼時鐘
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡易數(shù)碼時鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-03-03javascript實(shí)現(xiàn)任務(wù)欄消息提示的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)任務(wù)欄消息提示的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05躲避這些會改變原數(shù)組JavaScript數(shù)組方法讓開發(fā)流暢無阻
JavaScript中有些數(shù)組的操作方法并不符合我們預(yù)期,容易導(dǎo)致想象不到的結(jié)果,因此,為避免這種情況的發(fā)生,本文將介紹哪些原生數(shù)組方法能改變原數(shù)組以及我對于如何更好地使用數(shù)組方法的建議2023-05-05