JavaScript之instanceof方法手寫示例詳解
方法介紹
instanceof 是什么?
用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。
語法:object instanceof constructor
object:某個(gè)實(shí)例對(duì)象
constructor:某個(gè)構(gòu)造函數(shù)
簡(jiǎn)言之就是用來檢測(cè) constructor.prototype 是否存在于參數(shù) object 的原型鏈上。
個(gè)人理解:
instanceof 是用來判斷左側(cè)對(duì)象是否是右側(cè)構(gòu)造函數(shù)的實(shí)例化對(duì)象,或則說左側(cè)對(duì)象能否通過其隱式原型 **[[proto]]**在原型鏈上一層層向上查找到右側(cè)函數(shù)的原型對(duì)象,即函數(shù)原型對(duì)象出現(xiàn)在實(shí)例對(duì)象的原型鏈上就返回 true。
通俗的理解: 右側(cè)是不是左側(cè)的爸爸、爺爺、祖宗,只要左側(cè)對(duì)象繼承自右側(cè)函數(shù)就為 true
instanceof 使用方式
object instanceof 構(gòu)造函數(shù), 它有兩個(gè)必傳參數(shù),左側(cè)必須為對(duì)象類型,右側(cè)必須為函數(shù)類型。返回值為 Boolean 類型
注意: 你可能會(huì)認(rèn)為js中萬物皆對(duì)象,這個(gè)錯(cuò)誤的理解可能會(huì)誤導(dǎo)大家出現(xiàn)這種寫法: 'str' instanceof String,返回值為false,因?yàn)?‘str’ 就是簡(jiǎn)單的字符串,它和通過String構(gòu)造函數(shù)(new String('str'))創(chuàng)造出來的字符串是有區(qū)別的,可自行在控制臺(tái)打印出來看,其值會(huì)封裝成String對(duì)象類型的字符串,同理 new Number(3) instanceof Number, new Boolean(true) instanceof Boolean ……等等返回值為true。
代碼示例:
// 定義構(gòu)造函數(shù) function C () {} function D () {} // 實(shí)例化一個(gè) o 對(duì)象 var o = new C() // true,true --> C.prototype 在 o 的原型鏈上 console.log(o instanceof C, o.__proto__ === C.prototype, '此時(shí) o 的 __proto__:', o.__proto__, '此時(shí) C 的 prototype:', C.prototype) // false,false --> D.prototype 不在 o 的原型鏈上 console.log(o instanceof D, o.__proto__ === D.prototype) // true true --> Object.prototype 在 o 的原型鏈上 console.log(o instanceof Object, o.__proto__.__proto__ === Object.prototype) // 這時(shí)我們修改構(gòu)造函數(shù) C 的原型為一個(gè)空對(duì)象 C.prototype = {} // 實(shí)例化一個(gè) o2 對(duì)象 var o2 = new C() // true --> C.prototype 在 o2 的原型鏈上 console.log(o2 instanceof C) // false,C.prototype 指向了一個(gè)空對(duì)象,這個(gè)空對(duì)象不在 o 的原型鏈上. console.log(o instanceof C, '此時(shí) o 的 __proto__:', o.__proto__, '此時(shí) C 的 prototype:', C.prototype) console.log('此時(shí) D 的 prototype:', D.prototype); // 繼承 D.prototype = new C() console.log('此時(shí) D 的 prototype:', D.prototype); var o3 = new D() // true, true --> 因?yàn)?o3 是 構(gòu)造函數(shù) D new 出來的實(shí)例對(duì)象,所以 D.prototype 一定在 o3 的原型鏈上 console.log(o3 instanceof D, o3.__proto__ === D.prototype) // true --> 因?yàn)?C.prototype 現(xiàn)在在 o3 的原型鏈上 console.log(o3 instanceof C) // true,true --> 上面的結(jié)果為什么為 true 呢,看如下代碼,D.prototype 是 構(gòu)造函數(shù) C new 出來的實(shí)例對(duì)象,所以 C.prototype 一定在 D.prototype 的原型鏈上 console.log(o3.__proto__ === D.prototype, D.prototype.__proto__ === C.prototype); // true 相當(dāng)于如下代碼 console.log(o3.__proto__.__proto__ === C.prototype);
開始手寫
由上我們可以知道,instanceof其判斷的原理是:通過左側(cè)對(duì)象的隱式原型屬性 __ proto __ 在原型鏈上向上一層層查找,找到右側(cè)構(gòu)造函數(shù)的原型對(duì)象屬性 prototype 就返回 true。明白這一點(diǎn)也就很容易寫出自己的 instanceof。
注:需要借助循環(huán)來實(shí)現(xiàn)。
function myInstanceof(obj, func) { if(!['function', 'object'].includes(typeof obj) || obj === null) { // 基本數(shù)據(jù)類型直接返回false,因?yàn)椴粷M足instanceof的左側(cè)參數(shù)是對(duì)象或者說引用類型 return false } let objProto = obj.__proto__, funcProto = func.prototype while(objProto !== funcProto) { // obj.__proto__不等于func.prototype時(shí),繼續(xù)通過__proto__向上層查找 // 當(dāng)找到原型鏈盡頭Object.prototype.__proto__=null 時(shí)還未找到,就返回false objProto = objProto.__proto__ if(objProto === null){ return false } } // obj.__proto__ 等于 prototype = func.prototype 時(shí),不會(huì)進(jìn)入上面循環(huán),返回true // 不等進(jìn)入上面循環(huán),找到相等時(shí)會(huì)跳出循環(huán),走到這里返回true return true } //測(cè)試 function A(){} let a=new A; console.log(myInstanceof(a,A))//true console.log(myInstanceof([],A))//false
以上就是JavaScript之instanceof方法手寫示例詳解的詳細(xì)內(nèi)容,更多關(guān)于JavaScript instanceof 方法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01JSON字符串和對(duì)象相互轉(zhuǎn)換實(shí)例分析
這篇文章主要介紹了JSON字符串和對(duì)象相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式分析了json格式數(shù)據(jù)的轉(zhuǎn)換方法,涉及javascript正則與字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-06-06使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細(xì)介紹了使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄拗茝?fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11