一文搞懂instanceof实现的原理是什么!

发布网友 发布时间：2024-09-28 23:38

我来回答

共1个回答

热心网友 时间：2024-10-16 18:43

前言

类型的判断可以说在我们前端开发过程中无处不在，特别是在Typescript还未推出之前，我们在JS里面做类型判断显得就更加重要了。

判断数据类型的方式有特别多，比如大家常用的typeof、instanceof、Object.prototype.tostring.call()等等，那么每一种判断数据类的方法大家知道其中的原理吗？比如说instanceof的原理，今天我们就聊一聊instanceof是如何判断数据类型的。

1.基本概念

想要了解instanceof的原理，我们至少应该知道它的基本概念吧，我们可以先来看看官网是如何解释它的。

官网解释：

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

虽然官方的解释只有简短的一句话，但是对于许多人来说还是挺难理解的，不过我们可以抓出这句话中的几个关键点：

运算符

构造函数的prototype

对象原型链

很明显，instanceof与原型和原型链有关，所以强烈建议小伙伴们先去学一学原型和原型链的相关知识。

为了让小伙伴现有一个大概理解，我们用我们自己的话简单说一下instance。

通俗的解释：

instanceof是一个运算符，它可以用来判断某一个对象的类型，具体原理就是利用了原型和原型链。

基本用法：

AinstanceofB//trueorfalse

上段代码中的A就是我们需要判断类型的对象，B就是官方所说的构造函数，形如我们的Object、Function都可以称之为构造函数。

2.与typeof对比

我们判断类型的时候通常是将typeof和instanceof结合使用，虽然它们都可以判断数据类型，但是它们还是有很多不同点的，如下：

typeof：主要用来判断基础数据类型，比如：Number、String等等。

instanceof：主要用来判断对象数据类型，比如Function、Array等等。

typeof直接返回数据类型，而instanceof重在判断，它返回布尔值。

我们来看一段代码大家可能会更好理解一些。

代码如下：

<script>functionsay(){};//typeof判断数据类型console.log(typeof'小猪课堂');//stringconsole.log(typeof100);//numberconsole.log(typeoftrue);//booleanconsole.log(typeofundefined);//undefinedconsole.log(typeof{});//objectconsole.log(typeof[]);//objectconsole.log(typeofnull);//objectconsole.log(typeofsay);//function//instanceof判断数据类型leta=newString('123');letb=newsay();console.log('123'instanceofString);//falseconsole.log(ainstanceofString);//trueconsole.log([]instanceofArray);//trueconsole.log(binstanceofsay);//true</script>

从上段代码我们可以看出typeof只能判断基础数据类型（null除外），当判断其它数据类型时，它总是返回object或者function。

而instanceof可以用来判断对象数据类型，返回的是布尔值。

3.instanceof特点

上节中有一段代码我们可以拿出来再看一看：

letb=newsay();console.log(binstanceofsay);//true

上段代码中b是实例对象，say是构造函数，我们利用instanceof来进行判断时，返回的true，由此我们可以总结出instanceof如下特点：

instanceof左侧是一个实例对象，右侧是一个构造函数。

如果实例对象属于构造函数，那么instanceof就会返回true。

我们判断类型是使用的Array、Object、String等等其实就是一个构造函数。

总结：

由上可以得出，判断数据类型并不是instanceof最准确的说法，它主要是用来判断实例对象与构造函数之间的关系的。而判断数据类型只是我们利用它的特点变相实现罢了。

4.instanceof原理

到这里我们知道instanceof其实不仅仅是用来判断数据类型的，它实际上是用来判断一个实例对象与一个构造函数之间的关系的。

那么我们通常如何判断一个实例对象与一个构造函数之间的关系的呢？

答案就是利用原型和原型链！我们都知道每一个函数都有一个显式原型prototype，每一个对象都有一个隐式原型__proto__，当我们对象的原型链中存在构造函数的显式原型prototype时，我们就可以确定它们之间时存在关系的。

更简单的说法：

我们拿到instanceof左侧对象的原型链

再拿到instanceof右侧构造函数的显式原型prototype

如果原型链中存在显式原型prototype，instanceof返回true，否则返回false

如果大家对上面的说明看的模糊，那么快去补一补原型和原型链的知识。

我们可以简单实现一个instanceof函数，大家就更容易理解了。

代码如下：

/***@description判断对象是否属于某个构造函数*@pramsleft:实例对象right:构造函数*@returnboolean*/functionmyInstanceof(left,right){letrightPrototype=right.prototype;//获取构造函数的显式原型letleftProto=left.__proto__;//获取实例对象的隐式原型while(true){//说明到原型链顶端，还未找到，返回falseif(leftProto===null){returnfalse;}//隐式原型与显式原型相等if(leftProto===rightPrototype){returntrue;}//获取隐式原型的隐式原型，重新赋值给leftProtoleftProto=leftProto.__proto__}}

代码比较简单，主要就是需要循环实例对象的原型链。

我们回过头再看一遍代码：

letb=newsay();console.log(binstanceofsay);//true

上段代码为什么会返回true呢，其实是因为在new的操作过程中，有一步操作便是将say()构造函数的显式原型prototype赋值给了b的隐式原型__proto__，所以我们利用instance判断时，必然会满足leftProto===rightPrototype条件。

至于new操作符具体做了什么，大家可以去参考我的另一篇文章。

大家也可以直接打印看看结果：

console.log(b.__proto__===say.prototype);//true5.补充

instanceof判断数组时，如果把它归纳为Array是返回true，如果把它归纳为Object也是返回true的。

代码如下：

letarray=[1,2,3]console.log(arrayinstanceofArray);//trueconsole.log(arrayinstanceofObject);//true

究其原因其实是我们的数组也是一个对象，只不过这个对象稍微特殊一点罢了，大家也可以把数组的原型打印出来看看，一下就会明白了。

总结

看到这儿，你再回过头去看看官网关于instanceof的解释，相信你会恍然大悟！

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

如果觉得文章太繁琐或者没看懂，可以观看视频：?小猪课堂

原文：https://juejin.cn/post/7103335306103324685