typeof和instanceof的区别

前言

虽然typeof和instanceof是JavaScript中的基础知识，但这个知识点却有很多的小细节，所以导致有很多人被面试官问道这个问题时表现并不尽如人意。

数据类型

js中有7种数据类型，其中有6种基本数据类型：

undefined
Null
Boolean
Number
String
Symbol (在es10中加入了第7种原始类型BigInt，现已被最新Chrome支持) 其中Symbol是ES6新增的，还有一种复杂类型（引用类型）Object。我们常用typeof和instanceof操作符来判断数据类型

typeof

typeof 是一个一元操作符不是函数，所以不需要传递参数，使用方法非常简单：typeof A，使用typeof会直接返回类型结果

// Numbers 
typeof 37 === 'number';
// Strings 
typeof "" === 'string';
// Booleans 
typeof true === 'boolean';
// Symbols 
typeof Symbol('foo') === 'symbol';
// Undefined 
typeof undefined === 'undefined'; 
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量
// Objects 
typeof {a:1} === 'object';
type [1,2,3] = 'object'
------------------------'下面是不是有点奇怪？'--------------------------
// 函数
typeof function(){} === 'function';
// Null
typeof null === 'object'

我们可以轻松的用typeof判断数据类型，但是虚线下面的判断结构好像有点怪。这就涉及到了typeof实现原理的问题

typeof实现原理

让我们先来聊聊typeof的实现原理吧

js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息

000：对象
010：浮点数
100：字符串
110：布尔
1：整数

但是undefined 和 null 这两个值却比较特殊

null：所有机器码均为0
undefined：用 −2^30 整数来表示

这里我们先不管undefined，现在你们知道为什么typeof判断null是对象了吗，因为null的机器码全是0，所以被当成了object。这个bug存在了将近20多年，也许永远也不会修复，因为这牵涉到太多的web系统，修复它会产生更多的bug，令许多系统无法正常工作。

typeof判断函数返回结果就是函数，这其实还好理解，函数也是对象，因为函数比较重要，有自己特殊的属性，所以我们用typeof判断函数时会区分与对象，单独显示。

但是万一我们要判断这个实例属于哪个对象，那显然这时typeof已经失去作用了，因为除了函数，它都会判断为对象，这时我们就需要用到instanceof了

instanceof

instance中文翻译为实例，因此instanceof的含义就不言而喻，判断该对象是谁的实例，同时我们也就知道instanceof是对象运算符。

instanceof实现原理

instanceof的判断就是根据原型链进行搜寻，在对象obj1的原型链上如果存在另一个对象obj2的原型属性，那么表达式（obj1 instanceof obj2）返回值为true；否则返回false。下面代码说明了instanceof的使用方法

function Parent(){};
function Child(){};
function Other(){};

Child.prototype = new Parent();
let child = new Child();

child instanceof Child; // true
child instanceof Parent; // true
child instanceof Object; // true
child instanceof Other; // false

手写instanceof

手写instanceof代码的实现原理也是面试的考察点，instanceof核心实现如下，我们自己封装了一个具有instanceof功能的函数。

function instance_of(left, right) {
  let leftVal = left.__proto__;
  let rightVal = right.prototype;
  while (true) {
    if (leftVal === null) return false;
    if (leftVal === rightVal) return true;
    leftVal = leftVal.__proto__;
  }
}
let a = { name: '冯总' }
console.log(instance_of(a, Object));//true

总结

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

typeof会返回一个变量的基本类型，instanceof返回的是一个布尔值
instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
而typeof 也存在弊端，它虽然可以判断基础数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断

本文章已收录 JavaScript技术详解，更多JavaScript技术可查看专栏。 ❤码字不易点个免费的赞吧❤