JavaScript 手动实现instanceof的方法
1. instanceof的用法
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。
function Person() {}
function Person2() {}
const usr = new Person();
console.log(usr instanceof Person); // true
console.log(usr instanceof Object); // true
console.log(usr instanceof Person2); // false
如上代码，定义了两个构造函数，Person和Person2，又实用new操作创建了一个Person的实例对象usr。
实用instanceof操作符，分别检验构造函数的prototype属性是否在usr这个实例的原型链上。
当然，结果显示，Person和Object的prototype属性在usr的原型链上。usr不是Person2的实例，故Person2的prototype属性不在usr的原型链上。
2. 实现instanceof
明白了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;
}
myInstanceof函数接收两个参数：实例对象obj和构造函数constructor。
首先拿到实例对象的隐式原型：obj.__proto__，构造函数的原型对象constructor.prototype。
接着，就可以通过不断得到上一级的隐式原型：
implicitPrototype = implicitPrototype.__proto__;
来遍历原型链，寻找displayPrototype是否在原型链上，若找到，返回true。
当implicitPrototype为null时，结束寻找，没有找到，返回false。
原型链其实就是一个类似链表的数据结构。
instanceof做的事，就是在链表上寻找有没有目标节点。从表头节点开始，不断向后遍历，若找到目标节点，返回true。遍历结束还没找到，返回false。
3. 验证
写一个简单的实例验证一下自己实现的instanceof：
function Person() {}
function Person2() {}
const usr = new Person();
function myInstanceof(obj, constructor) {
let implicitPrototype = obj?.__proto__;
const displayPrototype = constructor.prototype;
while (implicitPrototype) {
if (implicitPrototype === displayPrototype) return true;
implicitPrototype = implicitPrototype.__proto__;
}
return false;
}
myInstanceof(usr, Person); // true
myInstanceof(usr, Object); // true
myInstanceof(usr, Person2); // false
myInstanceof(usr, Function); // false
myInstanceof(usr.__proto__, Person); // false
usr.__proto__ instanceof Person; // false
可以看到，myInstanceof正确得出了结果。
有趣的是，usr.__proto__ instanceof Person返回false，说明obj instanceof constructor检测的原型链，不包括obj节点本身。
JavaScript常见手写代码：
到此这篇关于JavaScript 手动实现instanceof的文章就介绍到这了,更多相关JavaScript instanceof内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章介绍了JS去除右边逗号的简单方法，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了微信小程序开发之路由切换页面重定向问题，又通过实例代码给大家介绍了微信小程序的路由跳转方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了原生JavaScript实现滑动拖动验证的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了bootstrap3 dialog 更强大、更灵活的模态框,本文通过效果展示实例代码详解，需要的朋友可以参考下2017-04-04
这篇文章主要介绍了Javascript 实现放大镜效果实例详解的相关资料,这里附有实现实例代码，具有参考价值，需要的朋友可以参考下2016-12-12
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
这篇文章主要为大家分享了一个精彩的Bootstrap案例，涉及到了选项卡、栅格布局，关键重点在注释，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了基于javascript编写简单日历的相关资料,需要的朋友可以参考下2016-05-05
两个对象A、B,A有数据B为空,B复制了A,我们修改A,如果B中的数据跟着变化了,那就是浅拷贝,如果没有变化,那就是深拷贝,下面这篇文章主要给大家介绍了关于js中区分深拷贝与浅拷贝的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要为大家介绍了JavaScript时间对象Date内置构造函数操作实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论