一文带你懂typeof与instanceof的区别

javascript语言，并不是强类型语言，所以未知变量的具体类型是什么，总会不经意困扰到开发人员。本文就简单聊聊二者区别。

typeof 使用

typeof操作符会返回一个字符串，表示未经计算的操作数的类型。语法上，运算符后接一个操作数。例如：

typeof 'YaoShen' //output: string
           

typeof操作符，仅可以返回类型 undefined、string、symbol、object、function、number、boolean、bigint。注：不包含null。

typeof 实现原理

在谈typeof原理之前，大家可以想一下计算机是如何保存数据的类型信息的。其实，js在计算中存储变量的类型的时候，使用了机器码的低位码1-3位。

// 低位码1-3位组合 含义如下：
1: 整数
000: 对象
010: 浮点数
100: 字符串
110: 布尔
           

这里，要注意的是null与undefined的机械码比较特殊，分别采用了全部为0和−2^30整数来表示。

这里就要说下typeof其实正是使用了机器码，来解锁变量的类型。因此，typeof null 会被当作对象来判断。

instanceof 使用

虽然typeof可以帮我们判断简单类型，但是当机器码低三位是000的情况时，就会都被当成object处理。这样就造成了颗粒度不够的情况。甚至判断错误。例如：

const test = new String('YaoShen');
typeof test // output: 'object';
           

所以，typeof处理基本类型，instanceof处理对象类型。这样就达到了天衣无缝的配合。

instanceof 实现原理

引用官网解释如下：

instanceof

 运算符用于检测构造函数的 

prototype

 属性是否出现在某个实例对象的原型链上。

其实，这一句话，就解释了instanceof的原理。也明白了它与typeof的区别很大。

接下来，就通过两个例子看下吧。

const Person = function () {}
const YaoShen = new Person();
YaoShen instanceof person // output: true
           

const Grandfather = function() {}
const Person = function () {}

Person.prototype = new Grandfather();
const YaoShen = new Person();
nicole instanceof Person // output: true
nicole instanceof Grandfather // output: true
           

结束语