引言

JavaScript中有七種原始數(shù)據(jù)類型和幾種引用數(shù)據(jù)類型，本文將清楚地介紹四種用于類型判斷的方法，分別是typeOf、instanceOf、Object.prototype.toString.call()、Array.isArray()，并介紹其使用方法和判定原理。

typeof

• 可以準確判斷除null之外的所有原始類型，null會被判定成object
• function類型可以被準確判斷為function，而其他所有引用類型都會被判定為object

let s = '123'   // string
let n = 123    // number
let f = true   // boolean
let u = undefined   // undefined
let nu = null    // null
let sy = Symbol(123)   // Symbol
let big = 1234n    // BigInt

let obj = {}
let arr = []
let fn = function() {}
let date = new Date()

console.log(typeof s);  // string    typeof后面有無括號都行
console.log(typeof n);  // number   
console.log(typeof f);  // boolean
console.log(typeof u);  // undefined
console.log(typeof(sy));  // symbol
console.log(typeof(big));  // bigint

console.log(typeof(nu));  // object

console.log(typeof(obj));  // object
console.log(typeof(arr));  // object
console.log(typeof(date));  // object

console.log(typeof(fn));  // function

判定原理

typeof是通過將值轉換為二進制之后，判斷其前三位是否為0：都是0則為object，反之則為原始類型。因為原始類型轉二進制，前三位一定不都是0；反之引用類型被轉換成二進制前三位一定都是0。

null是原始類型卻被判定為object就是因為它在機器中是用一長串0來表示的，可以把這看作是一個史詩級的bug。

所以用typeof判斷接收到的值是否為一個對象時，還要注意排除null的情況：

function isObject() {
    if(typeof(o) === 'object' && o !== null){
        return  true
    }
    return false
}

你丟一個值給typeof，它會告訴你這個字值是什么類型，但是它無法準確告訴你這是一個Array或是Date，若想要如此精確地知道一個對象類型，可以用instanceof告訴你是否為某種特定的類型

instanceof

只能精確地判斷引用類型，不能判斷原始類型

console.log(obj instanceof Object);// true
console.log(arr instanceof Array);// true
console.log(fn instanceof Function);// true
console.log(date instanceof Date);// true
console.log(s instanceof String);// false
console.log(n instanceof Number);// false
console.log(arr instanceof Object);// true  

判定原理

instanceof既能把數(shù)組判定成Array，又能把數(shù)組判定成Object，究其原因是原型鏈的作用————順著數(shù)組實例 arr 的隱式原型一直找到了 Object 的構造函數(shù)，看下面的代碼：

arr.__proto__ = Array.prototype
Array.prototype.__proto__ = Object.prototype

所以我們就知道了，instanceof能準確判斷出一個對象是否為某種類型，就是依靠對象的原型鏈來查找的，一層又一層地判斷直到找到null為止。

手寫instanceOf

根據(jù)這個原理，我們可以手寫出一個instanceof:

function myinstanceof(L, R) {
    while(L != null) {
        if(L.__proto__ === R.prototype){
            return true;
        }
        L = L.__proto__;
    }
    return false;
}

console.log(myinstanceof([], Array))  // true
console.log(myinstanceof({}, Object))  // true

Object.prototype.toString.call()

可以判斷任何數(shù)據(jù)類型

在瀏覽器上執(zhí)行這三段代碼，會得到'[object Object]'，'[object Array]'，'[object Number]'

var a = {}
Object.prototype.toString.call(a)

var a = {}
Object.prototype.toString.call(a)

var a = 123
Object.prototype.toString.call(a)

原型上的toString的內部邏輯

調用Object.prototype.toString的時候執(zhí)行會以下步驟：

• 如果此值是undefined類型，則返回 ‘[object Undefined]’
• 如果此值是null類型，則返回 ‘[object Null]’
• 將 O 作為 ToObject(this) 的執(zhí)行結果。toString執(zhí)行過程中會調用一個ToObject方法，執(zhí)行一個類似包裝類的過程，我們訪問不了這個方法，是JS自己用的
• 定義一個class作為內部屬性[[class]]的值。toString可以讀取到這個值并把這個值暴露出來讓我們看得見
• 返回由 "[object" 和 class 和 "]" 組成的字符串

為什么結合call就能準確判斷值類型了呢？

① Object.prototype.toString(xxx)往括號中不管傳遞什么返回結果都是'[object Object]'，因為根據(jù)上面五個步驟來看，它內部會自動執(zhí)行ToObject()方法，xxx會被執(zhí)行一個類似包裝類的過程然后轉變成一個對象。所以單獨一個Object.prototype.toString(xxx)不能用來判定值的類型

② 首先了解call方法的核心原理就是：比如foo.call(obj)，利用隱式綁定的規(guī)則，讓obj對象擁有foo這個函數(shù)的引用，從而讓foo函數(shù)的this指向obj，執(zhí)行完foo函數(shù)內部邏輯后，再將foo函數(shù)的引用從obj上刪除掉。手搓一個call的源碼就是這樣的：

// call方法只允許被函數(shù)調用，所以它應該是放在Function構造函數(shù)的顯式原型上的
Function.prototype.mycall = function(context) {
    // 判斷調用我的那個哥們是不是函數(shù)體
    if (typeof this !== 'function') {
      return new TypeError(this+ 'is not a function')
    }
  
    // this(函數(shù))里面的this => context對象
    const fn = Symbol('key')  // 定義一個獨一無二的fn，防止使用該源碼時與其他fn產(chǎn)生沖突
    context[fn] = this  // 讓對象擁有該函數(shù)  context={Symbol('key'): foo}
    context[fn]()  // 觸發(fā)隱式綁定
    delete context[fn]
  }

③ 所以Object.prototype.toString.call(xxx)就相當于 xxx.toString()，把toString()方法放在了xxx對象上調用，這樣就能精準給出xxx的對象類型

toString方法有幾個版本：

{}.toString() 得到由"[object" 和 class 和 "]" 組成的字符串

[].toString() 數(shù)組的toString方法重寫了對象上的toString方法，返回由數(shù)組內部元素以逗號拼接的字符串

xx.toString() 返回字符串字面量，比如

let fn = function(){}; 
console.log( fn.toString() ) //  "function () {}"

Array.isArray(x)

只能判斷是否是數(shù)組，若傳進去的x是數(shù)組，返回true，否則返回false

總結

typeOf：原始類型除了null都能準確判斷，引用類型除了function能準確判斷其他都不能。依靠值轉為二進制后前三位是否為0來判斷

instanceOf：只能把引用類型丟給它準確判斷。順著對象的隱式原型鏈向上比對，與構造函數(shù)的顯式原型相等返回true，否則false

Object.prototype.toString.call():可以準確判斷任何類型。要了解對象原型的toString()內部邏輯和call()的核心原理，二者結合才有精準判定的效果

Array.isArray()：是數(shù)組則返回true，不是則返回false。判定范圍最狹窄

以上就是JS類型判斷的四種方法詳解的詳細內容，更多關于JS類型判斷的資料請關注腳本之家其它相關文章！