欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript之instanceof方法手寫示例詳解

 更新時(shí)間:2022年10月31日 10:03:28   作者:十七喜歡前端  
這篇文章主要為大家介紹了JavaScript之instanceof方法手寫示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

方法介紹

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)鍵詞用法分析

    這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下
    2015-01-01
  • layui的面包屑或者表單不顯示的解決方法

    layui的面包屑或者表單不顯示的解決方法

    今天小編就為大家分享一篇layui的面包屑或者表單不顯示的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JS實(shí)現(xiàn)無限輪播無倒退效果

    JS實(shí)現(xiàn)無限輪播無倒退效果

    這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)無限輪播無倒退效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • javascript Demo模態(tài)窗口

    javascript Demo模態(tài)窗口

    不多介紹了,應(yīng)該見很多了,見過很多網(wǎng)站用的是Jquery的插件,個(gè)人覺得不夠靈活。
    2009-12-12
  • JSON字符串和對(duì)象相互轉(zhuǎn)換實(shí)例分析

    JSON字符串和對(duì)象相互轉(zhuǎn)換實(shí)例分析

    這篇文章主要介紹了JSON字符串和對(duì)象相互轉(zhuǎn)換的方法,結(jié)合實(shí)例形式分析了json格式數(shù)據(jù)的轉(zhuǎn)換方法,涉及javascript正則與字符串操作的相關(guān)技巧,需要的朋友可以參考下
    2016-06-06
  • js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序

    js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序

    這篇文章主要為大家詳細(xì)介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)圖片排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 使用p5.js實(shí)現(xiàn)動(dòng)態(tài)GIF圖片臨摹重現(xiàn)

    使用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)代碼

    限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼

    下面小編就為大家?guī)硪黄拗茝?fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-05-05
  • Bootstrap 布局組件(全)

    Bootstrap 布局組件(全)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap布局組件,感興趣的小伙伴們可以參考一下
    2016-07-07
  • JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼

    JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11

最新評(píng)論