当前位置:首页 > JavaScript

js实现instanceof

2026-01-31 20:36:24JavaScript

instanceof 运算符简介

instanceof 是 JavaScript 中的运算符,用于检测构造函数的 prototype 属性是否出现在对象的原型链中。其语法为 object instanceof constructor,返回布尔值。

js实现instanceof

手动实现 instanceof

以下是手动实现 instanceof 功能的代码示例:

js实现instanceof

function myInstanceof(obj, constructor) {
  // 检查 constructor 是否有效
  if (typeof constructor !== 'function' || !constructor.prototype) {
    throw new TypeError('Right-hand side of instanceof is not callable');
  }

  // 处理原始类型直接返回 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;
}

实现说明

  1. 参数验证:确保 constructor 是有效的构造函数(具有 prototype 属性)。
  2. 原始值处理:原始类型(非对象)直接返回 false,符合原生 instanceof 的行为。
  3. 原型链遍历:使用 Object.getPrototypeOf() 获取对象的原型,并沿原型链向上查找。
  4. 匹配判断:如果找到与构造函数 prototype 相同的对象,返回 true

使用示例

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(原始类型)

注意事项

  1. 跨框架对象检测可能失效,不同执行环境的相同构造函数可能不共享原型。
  2. 手动实现无法完全模拟内置对象(如 ArrayDate)的检测行为。
  3. 现代 JavaScript 中推荐使用 Symbol.hasInstance 自定义 instanceof 行为。

替代方案

对于更可靠的类型检测,可考虑:

  • Object.prototype.toString.call(obj)
  • Array.isArray() 等内置方法
  • typeof 运算符(针对原始类型)

标签: jsinstanceof
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 或直接使用 window.location 实现页面跳转,适用于普通跳转或带参数的 URL。 // 方…

js实现vue路由

js实现vue路由

Vue路由基础实现 使用Vue Router实现前端路由需要先安装并配置路由库。Vue Router是Vue.js官方的路由管理器。 安装Vue Router: npm install vue-r…

js实现图片轮播

js实现图片轮播

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

js实现视口

js实现视口

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

js实现上传图片

js实现上传图片

使用HTML5的File API实现图片上传 HTML5的File API允许通过JavaScript访问用户选择的文件。需要创建一个文件输入元素,并监听其change事件。 <input t…

js 实现拖拽

js 实现拖拽

实现拖拽的基本步骤 在JavaScript中实现拖拽功能需要监听几个关键事件:mousedown、mousemove和mouseup。以下是实现的基本逻辑。 监听目标元素的mousedown事件,记…