百度二面:你了解instanceof原理吗?

众所周知，在JavaScript中，检测一个变量的类型，无疑有三种方法typeof、Object.prototype和instanceof，这三种方式都会带大家了解一下。然后会重点讲述instanceof的实现原理和手写instanceof的实现。

一、typeof

typeof通常用来判断基本数据类型。它返回表示数据类型的字符串（返回结果只能是 number，boolean，string，undefined，function，object，symbol，bigint）。

语法：

typeof(变量)

typeof 变量

案例：

console.log(typeof ""); //string

console.log(typeof 1); //number

console.log(typeof true); //boolean

console.log(typeof undefined); //undefined

console.log(typeof function(){}); //function

console.log(typeof Symbol()); //symbol(es6)

console.log(typeof 23423n); //bigint(谷歌67版本新提出)

console.log(typeof null); //object

console.log(typeof []); //object

console.log(typeof {}); //object

注意：当我们开始用typeof检测null、数组、日期、正则、对象，结果全为object。对于引用数据类型的判断，使用typeof并不准确，所以可以使用instanceof来判断引用数据类型。

二、Object.prototype

Object.prototype.toString可以检测所有类型（自定义构造函数创建出来的实例对象除外）。

语法：

Object.prototype.toString.call( )

案例：

Object.prototype.toString.call('') ; // [object String]

Object.prototype.toString.call(1) ; // [object Number]

Object.prototype.toString.call(true) ; // [object Boolean]

Object.prototype.toString.call(Symbol()); // [object Symbol]

Object.prototype.toString.call(undefined) ; // [object Undefined]

Object.prototype.toString.call(null) ; // [object Null]

Object.prototype.toString.call(new Function()) ; // [object Function]

Object.prototype.toString.call(new Date()) ; // [object Date]

Object.prototype.toString.call([]) ; // [object Array]

Object.prototype.toString.call(new RegExp()) ; // [object RegExp]

Object.prototype.toString.call(new Error()) ; // [object Error]

Object.prototype.toString.call(document) ; // [object HTMLDocument]

Object.prototype.toString.call(window) ; // [object global] window 是全局对象 global 的引用

Object.prototype.toString({}); // [object Object]

注意：对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。

这种判断数据类型的缺点就是判断不了自定义构造函数创建出来的实例对象。

function Dog(name){

this.name = name;

}

var aoliao = new Dog('Samoye')

Object.prototype.toString.call(aoliao) ; // [object Object]

如图所示，判断出来的不是Dog，而是Object。

三、instanceof

instanceof主要用来判断引用数据类型，也可以用来判断一个实例是否属于某种类型。

语法：

A instanceof B

案例：

([]) instanceof Array; // true

({}) instanceof Object; // true

(function(){}) instanceof Function; // true

需要我们注意的是如何判断基本数据类型：var num = 1

num instanceof Number // false

num = new Number(1)

num instanceof Number // true

明明都是num，而且都是1，只是因为第一个不是对象，是基本类型，所以直接返回false，而第二个封装成对象，所以是true。string，boolean等基础类型都会出现一样的结果。为什么会出现这种情况，就需要我们来了解一下instanceof的原理了。

四、实现instanceof原理

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

即：如果 a instanceof B ，那么 a 必须要是个对象，而 B 必须是一个合法的函数。在这两个条件都满足的情况下：判断 B 的 prototype 属性指向的原型对象（ B.prototype ）是否在对象 a 的原型链上。如果在，则返回true；如果不在，则返回false。简而言之， instanceof 的原理其实就是一个查找原型链的过程。

我们也可以手动实现instanceof原理：

function myInstanceof(obj, constructor) {

// obj的隐式原型

let implicitPrototype = obj?.__proto__;

// 构造函数的原型

const displayPrototype = constructor.prototype;

// 遍历原型链

while (implicitPrototype) {

// 找到，返回true

if (implicitPrototype === displayPrototype) return true;

implicitPrototype = implicitPrototype.__proto__;

}

// 遍历结束还没找到，返回false

return false;

}

总结

由此我们可以得出结论：

1. typeof可以检测基本数据类型。

2. Object.prototype.toString可以检测自定义以外的所有数据类型。

3. instanceof不仅开业判断引用数据类型，也可以判断实例是否属于哪个类型。