【最全面的前端知识点】【二】【数据类型的检测】

JS数据类型的检测

提示：在项目中往往需要对数据类型进行判断的逻辑
例如：封装组件时，为了组件的可复用性高一些，接收的参数类型也就更多一些，那么在组件中就需要对不同类型的数据进行判断方可完成对应的业务

---

---

一、数据类型的检测有哪几种方式？

1. typeof (检测数据类型的运算符)

数值          typeof 50                          number
布尔          typeof true                        boolear
字符串        typeof '测试'                      string
数组          typeof []                          object
函数          typeof function(){}                function
对象          typeof {}                          object
null          typeof null                        object
undefined     typeof undefined                   undefined

这里有一点需要注意：数组和函数类型是object因为他们都是引用类型，但是null也是object  而null是基本数据类型   
这就是浏览器的一个bug，因为浏览器存储数据使用二进制存储的，前三位是0的就认为是对象，而null 所有都是0 也被
认为是对象，但是它不是对象，是一个基本数据类型，顶多可以被认为是一个空对象的指针

总结：typeof  主要检测基本数据类型

NaN 表示是否属于number的一种状态：是或否，不是确切的值，代表的是一个范围，所以NaN != NaN, 因为它本身就不是确切的值，没法进行判断
js中的number类型有浮点型和整数型还有一个特殊值NaN
Number(str) =》 NaN  就表示str存在不可转化为数字的变量
typeof NaN  ------->number

2. instanceof （检测某一个实例是否属于某个类）

可以正确判断对象的类型，内部运行机制，判断它的原型链上是否能找到这个类型的原型，不可以判断基本数据类型

数值         50              instanceof    Number                         
布尔         true            instanceof    Boolean                       
字符串       '测试'           instanceof    String                    
数组         []              instanceof    Array                         
函数         function(){}    instanceof    Function               
对象         {}              instanceof    Object    

instanceof 用于判断构造函数的prototype属性是否出现在对象的原型链的任何位置

instanceof 实现原理如下：
function instance(leftParam,rightParam){
	let proto = Object.getPrototypeOf(leftParam)  // 获取做左边参数的原型
	let prototype = rightParam.prototype // 获取右边构造函数prototype 属性
	while(true){
		if(!proto){
			return false //如果找不到原型 直接判断为false
		}
		if(prototype===proto){
			return
		}
		proto = Object.getPrototypeOf(proto)   // 走到这一步 说明第一次在原型链上没匹配上，一直往上找，直到找到根节点
	}
	
}

3.constructor （检测实例和类的关系，从而检测数据类型，引用原来构造对象的函数）

50的原型对象是(50)

数值         (50).constructor   ----->Number
布尔         (true).constructor   ----->Boolean
字符串       ('测试').constructor   ----->String
数组         ([]).constructor   ----->Array                     
函数         (function(){}).constructor   ----->Function
对象         ({}).constructor   ----->Object    

4. Object.prototype.toString.call() (检测数据类型)

let a = Object.prototype.toString

数值         a.call(50)   ----->Number
布尔         a.call(true)   ----->Boolean
字符串       a.call('sad')  ----->String
数组         a.call([])   ----->Array                     
函数         a.call(function(){})   ----->Function
对象         a.call({})   ----->Object    
a.call({undefined})   ----->undefined
a.call({null})   ----->null