当前位置:首页 > JavaScript

js instanceof实现

2026-04-07 04:39:38JavaScript

instanceof 实现原理

instanceof 用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。其核心逻辑是通过递归遍历对象的原型链,与构造函数的 prototype 属性进行比对。

手动实现代码

function myInstanceof(obj, constructor) {
  // 基本类型直接返回 false
  if (obj === null || typeof obj !== 'object') {
    return false;
  }

  let proto = Object.getPrototypeOf(obj);
  while (proto !== null) {
    if (proto === constructor.prototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

实现步骤解析

检查对象是否为基本类型:null 或非对象类型直接返回 false,因为基本类型无法通过 instanceof 检测。

获取对象的原型:使用 Object.getPrototypeOf() 获取对象的原型对象。

js instanceof实现

递归遍历原型链:通过循环不断向上查找原型链,直到找到匹配的 prototype 或到达原型链顶端(null)。

比对原型:每次遍历时检查当前原型是否等于构造函数的 prototype 属性,匹配则返回 true

js instanceof实现

使用示例

function Person() {}
const p = new Person();

console.log(myInstanceof(p, Person)); // true
console.log(myInstanceof(p, Object)); // true
console.log(myInstanceof([], Array)); // true
console.log(myInstanceof(123, Number)); // false

注意事项

原始值检测:手动实现的 instanceof 对原始值(如 123'str')会返回 false,与原生行为一致。

原型链修改:如果在检测过程中修改了对象的原型链,可能会影响检测结果。

跨框架对象:不同框架(iframe)中的对象可能无法正确检测,因为它们的全局环境不同。

与 typeof 的区别

typeof 返回变量类型的字符串表示,主要用于区分基本类型。 instanceof 检查对象与构造函数的关系,用于检测对象类型及继承关系。

标签: jsinstanceof
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现自举

js实现自举

实现 JavaScript 自举的方法 JavaScript 自举(Bootstrap)通常指通过 JavaScript 动态加载自身或依赖的脚本,实现运行时环境的初始化或扩展。以下是几种常见实现方式…

链表实现js

链表实现js

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和一个指向下一个节点的指针(单向链表)或两个指针(双向链表)。与数组不同,链表在内存中非连续存储,插入和删除操作更高效,但随机…

js实现视口

js实现视口

js实现视口检测的方法 使用JavaScript检测元素是否进入视口(viewport)可以通过Intersection Observer API或手动计算元素位置实现。以下是两种常见方法: Int…

js实现的游戏

js实现的游戏

JavaScript 游戏开发基础 JavaScript 是开发网页游戏的流行选择,因其无需插件即可在浏览器中运行。以下是一些关键技术和资源: HTML5 Canvas Canvas 提供了绘制图形…

js 实现文件上传

js 实现文件上传

文件上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现文件上传功能。以下是一个基础示例: <input ty…