JS数据类型检测typeof、instanceof、constructor、Object.prototype.toString.call()的区别

缺乏、安全感 2022-12-29 09:09 126阅读 0赞

## 数据类型检测的四种方式 ##

### typeof ###

> 不能细分对象类型的值，都是返回“object”，函数检测返回“function”。  
> typeof 10：number  
> typeof new Number(10)：object  
> typeof true：boolean  
> typeof new Boolean(true)：object  
> typeof “aaa”：string  
> typeof new String(“aaa”)：object  
> typeof null：object  
> …

*  底层原理：  
    typeof是按照“值”在计算机中存储的二进制值来检测的，凡是以000开始的都认为是对象（null:00000）。  
    优点：检测原始值类型和函数类型方便。

### instanceof ###

> 原本是检测某个对象是否是某个类的实例，临时拉来做数据类型检测，弥补typeof的一些不足，可以细分部分对象。  
> let arr = \[\];  
> arr instanceof Array

*  底层原理  
    arr instanceof Array，首先查找arr\[Symbol.hasInstance\]是否存在，如果存在基于这个检测Array\[Symbol.hasInstance\]（arr）。如果没有则基于原型链\_\_proto\_\_查找，只要Array.protoType出现在arr的原型链上，返回结果就是true。  
    arr\[Symbol.hasInstance\]  
    Array\[Symbol.hasInstance\]（arr）  
    arr.**proto** == Array.prototype  
    缺点：  
    1.不能检测原始值类型；  
    2.原型链可以重构，导致结果不准确；

### constructor ###

> 和instanceof类似，都是临时用做数据类型检测使用的，constructor原型可以重构，导致结构不准确。  
> 相对于instanceof，constructor可以检测原始值类型，但是只会基于原型链上的直属类检测。  
> let arr = \[\];  
> arr.constructor == Array ------------- true  
> arr.constructor == Object -------------- false  
> ps：因为arr.constructor直接指向的是Array

### Object.prototype.toString.call(); ###

> 除了null/undefined，大部分数据类型所属类的原型上，都有toString方法；但是所有的toString方法都是转换为字符串的只有Object原型上的toString方法是检测数据类型的。  
> 优点：结果准确  
> 返回值：“\[object ?\]”  
> let obj = \{\};  
> obj.toString.call(1)------------------- “\[object Number\]”  
> obj.toString.call(“1”)------------------- “\[object String\]”  
> obj.toString.call(true)------------------- “\[object Boolean\]”  
> obj.toString.call(new Date(2020-12-12))-- “\[object Date\]”  
> obj.toString.call(function()\{\})------------------- “\[object Function\]”  
> obj.toString.call(null)------------------- “\[object Null\]”  
> obj.toString.call(undefined)-----------------"\[object Undefined\]"  
> obj.toString.call(\[\])-----------------"\[object Array\]"

*  底层原理：  
    先找要检测值\[Symbol.toStringTag\]，先找私有的，如果找不到再找所属类原型上的，返回的属性值就是“?”;  
    如果找不到Symbol.toStringTag，则返回当前示例所属构造函数的名字;  
    let f =1;  
    f\[Symbol.toStringTag\]-------undefined  
    f.constructor\[Symbol.toStringTag\]-------undefined  
    f.constructor.name -------“Number”
 *  别忘了一键三连啊！！！