typeof & instanceof的区别

背景

在js中，判断数据类型是再常见不过的事，而在判断数据类型的时候，如题所说的两个方法是我们经常用到的，既然两个方法都存在，那他们之间又有着什么不同点呢，今天我们一起来看下~~

一、typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型

使用示例：

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

从以上六个例子可以看出，前6个均为基础数据类型。细心的xdm会发现一个问题：为什么typeof null返回的object，其实是因为这是JavaScript 隆隆二狗（long long ago)便存在的一个bug，这null就是引用数据类型，并且null本身也不是对象。

因此在 typeof null返回的是一个有问题的结果，并不能错位判断null的方法。有朋友可能会问到，那如何判断是否为null呢'，直接通过=== null来判断即可。

同时，xdm还会发现引用类型的数据，用typeof来判断的话，除了function会被识别出来之外，其余的都输出object

tips：如果我们想要判断一个变量是否存在，可以使用typeof：(注意不能使用if(xxx)， 若xxx未声明，则报错)，如下：

if(typeof xxx != 'undefined'){
    //变量存在
}

二、 instanceof

instanceof 运算符常用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

object instanceof constructor

代码如上：object为实例对象，constructor为构造器。

//声明构造函数
let fn = function() {}
//new一个实例对象，变量接收
let fn1 = new fn()
console.log(fn1 instanceof fn) // true

let aaa = new String('xxx')
aaa instanceof String // true

let str = 'xxx'
str instanceof String // false

instance实现原理

function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // getProtypeOf是Object对象自带的API，能够拿到参数的原型对象
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
        proto = Object.getPrototypeof(proto);
    }
}

三、区别

typeof与instanceof都是用来判断数据类型的方法，区别如下：

① typeof会返回一个变量的基本类型，而instanceof返回的是一个布尔值

② instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型

③ typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

因此可以看到，上述两种方法都有弊端，并不能满足所有场景的需求

** 如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果，加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"