当前位置:首页 > JavaScript

js实现intanceof

2026-04-06 13:26:23JavaScript

实现 instanceof 的原理

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。手动实现需要遍历对象的原型链,并与构造函数的 prototype 进行比较。

基本实现代码

function myInstanceof(obj, constructor) {
  let proto = Object.getPrototypeOf(obj)
  const prototype = constructor.prototype

  while (true) {
    if (proto === null) return false
    if (proto === prototype) return true
    proto = Object.getPrototypeOf(proto)
  }
}

实现要点

使用 Object.getPrototypeOf() 获取对象的原型 通过 while 循环不断向上查找原型链 当找到匹配的原型时返回 true 当原型链顶端为 null 时返回 false

js实现intanceof

边界情况处理

// 处理基本数据类型
function myInstanceof(obj, constructor) {
  if (obj === null || typeof obj !== 'object') {
    return false
  }

  let proto = Object.getPrototypeOf(obj)
  const prototype = constructor.prototype

  while (true) {
    if (proto === null) return false
    if (proto === prototype) return true
    proto = Object.getPrototypeOf(proto)
  }
}

使用示例

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 的区别

原生 instanceof 会检查对象的 Symbol.hasInstance 方法 原生 instanceof 对基本数据类型有特殊处理 此实现更关注原型链的核心机制

标签: jsintanceof
分享给朋友:

相关文章

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现乘

js实现乘

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

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <htm…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…