JS类型判断五种方法从原理到实战一文吃透(别再用错了!)

JS类型判断方法有5种，各有优劣和适用场景。本文从原理拆解到代码实战，再到扩展技巧（手写instanceof、重写Symbol.hasInstance）

一、typeof

typeof可以正确的判断除null以外的基本类型；除了函数外其他引用类型都会被判断为object

typeof原理

不同的对象在底层都表示为二进制；在JavaScript中二进制低位1-3存储其类型信息；

000：对象

010：浮点数

100：字符串

110：布尔值

1：整数

但是对于 undefined和null来说，这两个的信息存储有些特殊；

• null：所有机器码均为0

• undefined：用 -2^30整数来表示

所以，typeof在判断null的时候就出现了问题，由于null的所有机器码均为0，因此被当成了对象；

二、instanceof

instanceof只能运用于引用类型；它会顺着原型链一直往上找，找到的话返回true, 否则返回false;

/**
  自定义instanceof 
*/
function instanceOf(left, right) {
  let proto = left.__proto__
  while(proto){
    if(proto === right.prototype){
       return true
    }
    proto = proto.__proto__
  }  
  return false
}

instanceof可以通过类的静态方法Symbol.hasInstance修改；

扩展 Symbol.hasInstance

Symbol.hasInstance 是一个改变instanceof操作符默认行为的symbol

instanceof的使用：

obj instanceof type;
// 判断引用数据的类型，通过原型链一直往上找，找到的话返回true，否则为false

那么js就会执行Symbol.hasInstance方法；它会调用type的Symbol.hasInstance静态方法，将obj作为参数；

class Stack {
}
console.log([] instanceof Stack);
// false

[] 数组不是Stack类所创建的实例，所以返回false。

假设要使[] 数组是Stack类所创建的实例，返回true，我们可以重写Symbol.hasInstance的方法

class Stack {
    static [Symbol.hasInstance](obj) {
        return Array.isArray(obj);
    }
}
console.log([] instanceof Stack);
// true

上面例子中，Stack本应该不是数组，但是可以通过重写Symbol.hasInstance修改instanceof的返回值；

三、Object.prototype.toString

JavaScript的每个值的原型上都会有个toString方法；

Object.prototype.toString.call和Object.prototype.toString.apply方法是最全面的；

四、constructor

constructor的判断原理跟instanceof类似；不同的是 constructor 既可以判断引用类型，也可以判读基础类型；

constructor属性可以得知某个实例对象，到底是哪一个构造函数产生的；

Tips

• null 和undefined没有constructor
• 判断数字时使用（）、(123).constructor === Number
• constructor在类继承时会报错，因为Object被覆盖掉了，检测结果不对了；

五、isArray

只实用于数组；Array.isArray()

六、总结

到此这篇关于JS类型判断五种方法从原理到实战一文吃透的文章就介绍到这了,更多相关JS类型判断方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论