(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
相关推荐
子兮曰2 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
百锦再2 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
百锦再2 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
颜酱4 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
小迷糊的学习记录4 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜5 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛5 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大5 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT065 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年6 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js