(JavaScript)instanceof 操作符的实现原理及实现

instanceof 是 JavaScript 中的一个操作符,它用于检查一个对象是否是某个特定类或构造函数的实例

instanceof 的实现原理可以通过遍历对象的原型链来进行检查。以下是一个关于 instanceof 的简单实现:

js 复制代码
function customInstanceof(object, constructor) {
    let prototype = constructor.prototype;
    while (object !== null) {
        if (object === prototype) {
            return true;
        }
        object = Object.getPrototypeOf(object);
    }
    return false;
}
  • 使用方法:
js 复制代码
function Person(name) {
    this.name = name;
}

const person = new Person("John");
console.log(customInstanceof(person, Person)); // true
console.log(customInstanceof(person, Object)); // true,因为所有对象都是 Object 的实例

这是一个简单的 customInstanceof 实现,它接受两个参数:要检查的对象object和目标构造函数constructor。它首先获取目标构造函数的原型对象,然后开始遍历对象的原型链。在遍历过程中,它检查对象是否与目标构造函数的原型相等,如果是,则返回 true,表示对象是目标构造函数的实例。如果遍历完整个原型链都没有找到匹配,就返回 false(ps: JavaScript 引擎本身的 instanceof 操作符会更复杂,处理更多边缘情况)

一些问题

上面的实现中,为什么要先获取目标构造函数的原型对象而不是直接用目标构造函数?

要理清这个问题,首先我们要先来了解一下原型以及构造函数的概念:

  • 构造函数(Constructor Function) :构造函数是用来创建对象实例的函数 。它通常以大写字母开头,按照命名约定,以示它是一个构造函数。构造函数内部使用 this 关键字来定义对象实例的属性和方法。每次通过构造函数调用 new 关键字创建新对象时,都会生成一个新的对象实例,并且这个对象实例会自动继承构造函数的原型
js 复制代码
function Person(name) {
    this.name = name;
}

const person1 = new Person("John");
const person2 = new Person("Alice");
  • 原型(Prototype) :原型是一个对象,它包含了构造函数的共享属性和方法。构造函数的每个实例都有一个指向原型的链接,这就构成了原型链。通过原型,多个对象实例可以共享相同的方法和属性,从而节省内存和实现继承。
js 复制代码
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
}

总而言之,构造函数 用于创建对象实例,而原型用于定义这些对象实例的共享属性和方法。

回到上面的问题中,首先我们要知道instanceof 运算符的主要目的是检查一个对象是否是某个构造函数(或类)的实例 ,而不是检查一个对象是否是另一个对象的实例,而构造函数是一个函数,它只是用来创建对象实例的,我们对比的是构造函数的原型对象 以及要检查的对象,所以我们要先获取目标构造函数的原型对象,理清这个关系就能很好理解了

下面简单介绍一下对象原型链的概念:

JavaScript 中的对象通过原型链相互关联,这是面向对象编程的一个核心概念。原型链是一种对象之间的连接关系,它用于继承属性和方法。

  1. 每个对象都有一个原型 :在 JavaScript 中,每个对象都有一个指向另一个对象的链接,这个链接就是原型。对象通过这个原型链接继承属性和方法。你可以通过 Object.getPrototypeOf(obj) 方法来获取一个对象的原型。(上面的instanceof 的简单实现便是通过这种方式确定原型)
  2. 原型是对象 :原型本身也是一个对象,它可以有自己的原型,形成一个链。这个链的顶端是一个特殊的对象,通常是 Object.prototype
  3. 原型链的遍历 :当你尝试访问一个对象的属性或方法时,JavaScript 引擎首先查找该对象本身是否具有这个属性或方法,如果没有,它会沿着原型链向上查找,直到找到该属性或方法或者到达链的末端(Object.prototype)。如果仍然没有找到,访问就会返回 undefined
相关推荐
liu****4 分钟前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San306 分钟前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶1 小时前
并行SSR,SSR并行加载
前端·javascript·架构
威风的虫2 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
bot5556662 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室2 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
曦曜2922 小时前
富文本编辑器
javascript
多啦C梦a3 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
zhangzelin8883 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
软件技术NINI3 小时前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html