(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
相关推荐
vipbic4 小时前
一个前端的 9 天重构:我是怎么用 Codex 重做航栈的
前端·javascript·后端
kyriewen6 小时前
我受够了复制报错去问 AI,花一下午给控制台做了个调试助手
前端·javascript·ai编程
慧都小妮子7 小时前
前端实现复杂公式计算:SpreadJS 在京东物流 Udata 平台的落地实践
javascript·数据分析·excel·数据可视化·spreadjs·前端表格控件
JJJennie7778 小时前
Gemini 3.7 Flash 上线,Google 想让 AI 多干活
开发语言·javascript·ecmascript
MgArcher9 小时前
抖音a_bogus参数逆向实战:JSVMP环境模拟与Hook技术(2025最新)
javascript·爬虫·python
晴天1610 小时前
Mojo IPC 和 Electron 的关系-Day21
javascript·electron·mojo
三十而立洋11 小时前
Promise到底是什么、怎么用
javascript
IMPYLH12 小时前
HTML 的 <h1>–<h6> 元素
前端·javascript·html