脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript instanceof

JavaScript 手动实现instanceof的方法

 更新时间：2021年10月29日 11:28:23   作者：火星飞鸟  
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，本文重点给大家介绍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常见手写代码：

「GitHub—code-js」

到此这篇关于JavaScript 手动实现instanceof的文章就介绍到这了,更多相关JavaScript instanceof内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 微信小程序如何刷新当前界面的实现方法

    微信小程序如何刷新当前界面的实现方法

    这篇文章主要介绍了微信小程序如何刷新当前界面的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 原生JS写Ajax的请求函数功能

    原生JS写Ajax的请求函数功能

    本文给大家分享一个自己写的基于原生JS写Ajax的请求函数功能,需要的朋友可以参考下
    2017-12-12
  • element UI中在 el-select 与 el-tree 结合组件实现过程

    element UI中在 el-select 与 el-tree 结合组件实现过程

    项目上实现某个功能，使用到了 el-select 和 el-tree 组合实现，记录下两者结合的实现过程，对 el-select 与 el-tree 结合组件实现过程感兴趣的朋友跟随小编一起看看吧
    2023-02-02
  • Javascript数组操作函数总结

    Javascript数组操作函数总结

    这篇文章主要给大家汇总介绍了Javascript数组操作函数,需要的朋友可以参考下
    2015-02-02
  • 浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    下面小编就为大家带来一篇浅谈javascript运算符——条件,逗号,赋值,()和void运算符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Javascript call及apply应用场景及实例

    Javascript call及apply应用场景及实例

    这篇文章主要介绍了Javascript call及apply应用场景及实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 基于input框覆盖掉数字英文的实例讲解

    基于input框覆盖掉数字英文的实例讲解

    下面小编就为大家带来一篇基于input框覆盖掉数字英文的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JavaScript 开发规范要求(图文并茂)

    JavaScript 开发规范要求(图文并茂)

    作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。
    2010-06-06
  • JavaScript利用HTML DOM进行文档操作的方法

    JavaScript利用HTML DOM进行文档操作的方法

    DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。通过本文给大家介绍JavaScript利用HTML DOM进行文档操作的方法，需要的朋友参考下吧
    2016-03-03
  • 兼容IE与Firefox的js 复制代码

    兼容IE与Firefox的js 复制代码

    这是一段点击复制的代码，现在我的页面里不仅有1个链接需要用到这段代码。请哪位好心人指教一下应该怎么用ID对应的方式来改写这段js，使它实现一个点击复制对应1个相应内容
    2009-12-12

最新评论