web前端高级JavaScript - JavaScript中四种数据类型检测的底层机制及重写instanceof

清疚 2022-12-20 11:26 181阅读 0赞

### typeof 检测数据类型的运算符 ###

>  *  typeof 返回的结果都是字符串
>  *  字符串中包含了对应的数据类型：“number/string/boolean/undefined/symbol/bigint/function/object”
>  *  如果是多个typeof连在一起则返回的一定都是"string"
>  *  typeof 原理：按照计算机底层存储的二进制结果来进行检测的，对象存储的二进制都是以“000”开头的
>  *  typeof null 返回的结果是"object" 因为null的二进制值是000，但null并不是对象
>  *  所有的对象都是以000开头，所以基于typeof检测的结果都是“object”，也就是说typeof无法细分是普通对象还是数组对象

### instanceof ###

>  *  严格意义上来说，instanceof并不是用来检测数据类型的，而是用来检测当前实例是否属于这个类；
>  *  一般只应用于普通对象、数组对象、正则对象、日期对象等具体细分的。
>  *  无法应用到原始值类型值的检测上（基本数据类型如10）
>  *  xxx instanceof Object即使返回true也不能证明xxx就是普通对象object

// xxx instanceof Object即使返回true也不能证明xxx就是普通对象
    let arr = [];
    console.log(arr instanceof Array);// true
    console.log(arr instanceof Object);//true 不能证明arr是普通对象
    console.log(arr instanceof RegExp);//false
    
    //instanceof 无法应用到原始值类型值的检测上
    let n = 10 ;
    let m = new Number(10);
    console.log(n.toFixed(2));//10.00 => n是Number类的实例，只不过它是以字面量方式创造出来的原始类型值（其实在执行n.toFixed(2)时，n这个基本类型值浏览器内部也会把它通过Object(n)转换一下，然后再调用方法，这样它就具备__proto__了）
    console.log(m.toFixed(2));//10.00 => 结果一样，m也是Number类的实例，而它是以构造函数的方式创建出来的引用类型值
    console.log(n instanceof Number);//false 是因为是基本数据类型，没有__proto__
    console.log(m instanceof Number);//true
    
    function Person(){ }
    Person.prototype = Array.prototype;
    let p1 = new Person();
    console.log(p1 instanceof Array);// true
    console.log(p1);//虽然p1可以基于__proto__找到Array.prototype，但是它不具备数组的任何特征（length、索引都没有），所以可以断定这家伙肯定不是一个数组，但是console.log(p1 instanceof Array)却返回了true，是因为它基于原型链找到了Array.prototype
    //所以说严格意义上来讲，instanceof并不能用来进行数据类型检测

*  **instanceof的检测原理**：

>  *  在Function的原型上有个Symbol.hasInstance方法：Function.prototype\[Symbol.hasInstance\] = function \[Symbol.hasInstance\]\{\[native code\]\}
>  *  而基于“ 实例 instanceof 类”检测的时候，浏览器底层实际上是调用Symbol.hasInstance方法进行检测的，如“类\[\[Symbol.hasInstance\]\] (实例)” Array\[\[Symbol.hasInstance\]\] (arr)
>  *  而在Symbol.hasInstance方法的内部，会根据当前实例的原型链（\_\_proto \_\_）上是否存在这个类的原型(prototype)来检测
>     
>      *  arr.\_\_ proto\_\_ === Array.prototype => arr instanceof Array : true
>      *  arr.\_\_ proto\_\_.\_\_ proto\_\_ === Object.prototype => arr instanceof Object : true

let obj = { };
    let arr = [];
    console.log(arr instanceof obj);//Uncaught TypeError: Right-hand side of "instanceof" is not callable.
    //报错原因是因为obj是一个对象，它没有Symbol.hasInstance这个方法（只有函数才可以调用Function.prototype的这个方法）

### constructor ###

>  *  严格意义上讲，它也不是用来检测数据类型的，原本是用来获取实例的构造函数的。基于这个特点可以充当数据类型检测
>  *  这家伙比instanceof会好用一些
>  *  但检测结果不准确，因为constructor可以随意被修改

let arr = [];
    console.log(arr.constructor === Array);// true 在constructor不被修改的情况下这样就可以区分是数组还是普通对象
    console.log(arr.constructor === Object);//false 
    console.log(arr.constructor === RegExp);//false
    
    function Person(){ }
    Person.prototype = Array.prototype;
    let p1 = new Person();
    console.log(p1.constructor === Array);// true 一旦原型被重定向，constructor也被改了，所以检测就不准了
    
    let n = 10 ;
    let m = new Number(10);
    console.log(n.constructor === Number);//true
    console.log(m.constructor === Number);//true

### Object.prototype.toString.call ###

>  *  专门用来检测数据类型的（很强大很暴力，基本零瑕疵）
>  *  Number/String/Boolean/Symbol/BigInt/Function/Array/RegExp/Date/Object…的原型上都有toString方法，但是只有Object.prototype.toString是用来检测数据类型的，其它都是用来转换字符串的。
>  *  返回结果：“\[object 对象\[Symbol.toStringTag\] ||对象.构造函数|| Object\]”，即如果对象有Symbol.toStringTag属性则返回它的值，如果没有这个属性则找对象的构造函数，如果构造函数也没有则找Object
>  *  即使constructor被更改也不受影响，但仅对内置类有效，对自定义类是无效的

### 重写instanceof ###

//两个参数
    //obj: 要检测的实例对象（不支持原始值类型）
    //constructor: 要检测的类（必须是一个函数类型）
    function instance_of(obj, constructor){ 
    	if(typeof obj == null || (typeof obj !== 'function' && typeof obj !== 'object')) return false;
    	if(typeof constructor !== 'function') throw new TypeError("Uncaught TypeError: Right-hand side of 'instanceof' is not callable.");
    
    	//支持Symbol并且拥有Symbol.hasInstance则以这个处理
    	if(typeof Symbol !== 'undefined'){ 
    		var hasInstance = constructor[Symbol.hasInstance];
    		if(typeof hasInstance === "function"){ 
    			return hasIntance.call(constructor, obj);
    		}
    	}
    
    	//因为IE不支持__proto__，所以我们这里不能用__proto__, 换成等价的Object.getPrototypeOf()方法
    	//obj.__proto__ === Object.getPrototypeOf(obj);
    	let proto = Object.getPrototypeOf(obj);
    	let prototype = constructor.prototype;
    	//利用循环，如果当前对象的__proto__中没有constructor则向上级原型链中查找
    	while(true){ 
    		//如果最后已经找到Object了仍然没有找到，则返回false
    		if(proto == null) return false;
    		//如果找到了直接返回true
    		if(proto === prototype)
    			return true;
    		//如果没有找到则继续向上查找
    		proto = Object.getPrototypeOf(proto);
    	}
    }
    
    console.log(instance_of([], Array));// true
    console.log(instance_of([], object));// true
    console.log(instance_of([], RegExp));// false
    console.log(instance_of(10, Number));// false
    console.log(instance_of(new Number(10), Number));// true
    console.log(instance_of([], { });// 报错， {}不是一个function