当前位置:首页 > 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实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

原生js实现轮播图

原生js实现轮播图

基本结构搭建 HTML部分需要包含轮播图容器、图片列表及导航按钮。结构示例如下: <div class="slider-container"> <div class="slid…

js实现乘

js实现乘

JavaScript 实现乘法运算 在 JavaScript 中实现乘法运算可以通过多种方式完成,包括基本运算符、函数封装以及高级算法(如大数乘法)。以下是几种常见方法: 使用基本乘法运算符 Jav…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…