JavaScript自我實現系列(1):instanceof

大眾美男典範發表於2018-11-28

JavaScript判斷型別的三種方法

  1. typeof

  2. instanceof

  3. Object.prototype.toString

typeof

使用:

console.log(typeof 1024) // "number"
複製程式碼

特殊情況:

// js自身的bug
console.log(typeof null) // "object"
複製程式碼

侷限:

// 不能明確是object型別的具體型別
console.log(typeof {}) // "object"
console.log(typeof []) // "object"
複製程式碼

使用建議:

最好用typeof判斷基本型別

instanceof

使用:

var arr = []
console.log(arr instanceof Array) // true
var now = new Date()
console.log(now instanceof Date) // true
複製程式碼

使用建議:

用來判斷一個例項是否是其父型別或祖先型別的例項

可以結合typeof判斷資料的具體型別

自我實現

/*
*  instanceof的工作原理,就是判斷
*  右邊變數的prototype是否在左邊變數的原型鏈上。
*  
*  假如把prototype看成一個區域,
*  instanceof的工作原理,就是判斷
*  左邊變數是否可以到達右邊變數所屬的這個區域。
*  
*  所以,我們就能解鎖隱藏在instanceof裡面的彩蛋:
*  一個男孩找女孩的遊戲。
*/

function canBoyFind(boy, girl) {
    // girlRoom就是女孩的閨房
    var girlRoom = girl.prototype
    // room就是男孩現在所在的房間
    var room = boy.__proto__
    while (true){
        // 重複以下規則:
        // 1. 男孩一臉懵逼————自己竟然在馬路上。遊戲直接結束!
        if (room === null){
            return false
        }
        // 2. 男孩就在女孩閨房,恭喜這對新人!
        if (room === girlRoom){
            return true
        }
        // 3. 男孩既不在馬路上,也不在女孩閨房裡。
        //    但是,這裡有一把鑰匙(__proto__),可以通往下一個房間。
        //    男孩走進下一個房間...
        room = room.__proto__
    }
}
複製程式碼

Object.prototype.toString

使用:

Object.prototype.toString.call(1) // "[object Number]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call(null) // "[object Null]"
複製程式碼

使用建議:

這麼好用,我先記下了

JavaScript自我實現系列 點選檢視

相關文章