面试官：说说 typeof 与 instanceof 区别?

今天药忘吃喽~ 2022-11-04 11:08 192阅读 0赞

![e8d906d3ed6c265df38da2813551abfd.png][]

## 一、typeof ##

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

使用方法如下：

typeof operand
    typeof(operand)

`operand`表示对象或原始值的表达式，其类型将被返回

举个例子

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个都是基础数据类型。虽然`typeof null`为`object`，但这只是`JavaScript` 存在的一个悠久 `Bug`，不代表`null`就是引用数据类型，并且`null`本身也不是对象

所以，`null`在 `typeof`之后返回的是有问题的结果，不能作为判断`null`的方法。如果你需要在 `if` 语句中判断是否为 `null`，直接通过`===null`来判断就好

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

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

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

## 二、instanceof ##

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

使用如下：

object instanceof constructor

`object`为实例对象，`constructor`为构造函数

构造函数通过`new`可以实例对象，`instanceof`能判断这个对象是否是之前那个构造函数生成的对象

// 定义构建函数
    let Car = function() {}
    let benz = new Car()
    benz instanceof Car // true
    let car = new String('xxx')
    car instanceof String // true
    let str = 'xxx'
    str instanceof String // false

关于`instanceof`的实现原理，可以参考下面：

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);
        }
    }

也就是顺着原型链去找，直到找到相同的原型对象，返回`true`，否则为`false`

## 三、区别 ##

`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]"

了解了`toString`的基本用法，下面就实现一个全局通用的数据类型判断方法

function getType(obj){
      let type  = typeof obj;
      if (type !== "object") {    // 先进行typeof判断，如果是基础数据类型，直接返回
        return type;
      }
      // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
      return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
    }

使用如下

getType([])     // "Array" typeof []是object，因此toString返回
    getType('123')  // "string" typeof 直接返回
    getType(window) // "Window" toString返回
    getType(null)   // "Null"首字母大写，typeof null是object，需toString来判断
    getType(undefined)   // "undefined" typeof 直接返回
    getType()            // "undefined" typeof 直接返回
    getType(function(){}) // "function" typeof能判断，因此首字母小写
    getType(/123/g)      //"RegExp" toString返回

面试官JavaScript系列正在更新：13/33

[面试官：说说你对Javascript中作用域的理解?][Javascript]

[面试官：JavaScript原型，原型链 ? 有什么特点？][JavaScript_ _]

[面试官：说说Javascript中的继承？如何实现继承？][Javascript 1]

[面试官：说说你对Javascript中this对象的理解][Javascript_this]

[面试官：JavaScript中执行上下文和执行栈是什么？][JavaScript]

[面试官：JavaScript中的事件模型如何理解?][JavaScript 1]

篇副有限，扫下方二维码查看往期

![26393fa81b601d642c801f747e1e4b5e.png][]

[e8d906d3ed6c265df38da2813551abfd.png]: /images/20221023/ad3b9ccc26d64039b9673f71bf4a3b0b.png
[Javascript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10caadcb6743bba52b054baa67b782ec057522d87204fc5fb02050e3a01fcc32a2de949f62&idx=2&mid=2247485691&scene=21&sn=17ceeb1eebf1ca79991a44487fae3b06#wechat_redirect
[JavaScript_ _]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb5dcb67424bf470fe32ebe876597f66a9fed17bb9ef18c53eb33e39504dbcec7c2b4a98&idx=1&mid=2247485707&scene=21&sn=56b670c1587570276d1f2dda04c804a4#wechat_redirect
[Javascript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb77cb6742619b2a76aa0d882d4e94d7021d8813f6ea09667b16146040faed9806203523&idx=2&mid=2247485729&scene=21&sn=e3d6148c0f4ab3617bcdf8f8501c7eb2#wechat_redirect
[Javascript_this]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb6dcb67427b39ac8102099de814bfe368726aa25cb78967f8ca7c1107c59fc5ac29ba92&idx=2&mid=2247485755&scene=21&sn=8df3e7c0ada42fc112f2fa4c8bf0448c#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb1dcb67420bfb31f6560570b9b1dbcb3b46ad83bee8ec240ae1bfa8fbe9edfb18521576&idx=1&mid=2247485771&scene=21&sn=cb4eccd7996c95ca260c4a8d85e92113#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cbc1cb6742d7d877332259c1563d2dcc8b114c5b1d1ed8c08b71b47502053ae5cb341c8e&idx=1&mid=2247485847&scene=21&sn=6214e1eda9a0205c143e6c26ac4426ca#wechat_redirect
[26393fa81b601d642c801f747e1e4b5e.png]: /images/20221023/70c4967ea3784b269769c4779b513bd9.png