(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
相关推荐
web打印社区8 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
YiHanXii10 小时前
this 输出题
前端·javascript·1024程序员节
维他命Coco10 小时前
js常见开发学习
javascript
!win !11 小时前
分享二个实用正则
javascript·正则表达式
xw511 小时前
分享二个实用正则
javascript·正则表达式
刘新明198912 小时前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
诚实可靠王大锤12 小时前
react-native实现多列表左右滑动+滚动TabBar悬停
javascript·react native·react.js·1024程序员节
疯狂的沙粒13 小时前
前端开发【工具函数】基于dayjs 封装的DateUtils工具函数,可以直接拿着使用
前端·javascript·vue.js·1024程序员节
jingling55513 小时前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css
你的电影很有趣13 小时前
lesson76:Vue.js 核心特性详解:事件处理、计算属性与侦听器
javascript·vue·1024程序员节