(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。
相关推荐
小羊没烦恼!7 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
Highcharts.js8 小时前
AI图表开发工具Highcharts Assist|自然语言生成图表代码
javascript·人工智能·highcharts·开发神器
志尊宝8 小时前
Vue3 零基础每日笔记(087):Vue3 高频面试题(下)
前端·javascript·vue.js·笔记·ecmascript·#vue.js
const_qiu10 小时前
第二章 2.6:初始化 NestJS 服务端 —— TypeScript 后端框架体验
前端·javascript·typescript
miofly11 小时前
GitHub 今日推荐|sweety-handdraw-video:文章转手绘口播视频
javascript·开源·github
用户831348593069812 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
漫步人生走在路上12 小时前
用小语种SEO突破外贸B2B天花板:法语、德语市场的实测数据
开发语言·前端·javascript·人工智能·搜索引擎·ecmascript
ydjs678899-bot13 小时前
您的Next.js中间件匹配器配置可能会跳过您认为它保护的路由
开发语言·javascript·中间件
Chengbei1114 小时前
JsOwl|AI 赋能 JS 敏感信息扫描器,AST + 正则、source‑map 源码还原、登录态爬虫输出交互式 HTML 报告
开发语言·javascript·网络·人工智能·爬虫·网络安全·自动化
ShineWinsu14 小时前
对于JavaScript:初识JavaScript以及输入输出
java·开发语言·前端·javascript·css·面试·html