前端开发中的常用工具函数(二)（持续更新中...）

🔍 五、instanceof

在企业级前端开发中，处理复杂数据类型、区分对象来源、或是编写健壮的工具库时，typeof 往往显得力不从心。这时，instanceof 就像一张"身份识别卡"，帮助我们在 JavaScript 复杂的原型链中精准定位对象的类型。

引言：为什么需要 instanceof？

作为前端开发者，我们最常用的类型判断工具是 typeof。但 typeof 有一个著名的"缺陷"：对于引用类型（Object、Array、Date 等），它统统返回 object。

const arr = [];
const date = new Date();

console.log(typeof arr);   // "object"
console.log(typeof date);  // "object"

1. 基本概念与语法

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

(1) 语法

object instanceof constructor

• object：要检测的对象。
• constructor：某个构造函数。

(2) 简单示例

function Person() {}

const p1 = new Person();

console.log(p1 instanceof Person); // true
console.log(p1 instanceof Object); // true (因为 Person.prototype 继承自 Object.prototype)
console.log([] instanceof Array);    // true
console.log([] instanceof Object);   // true

2. 核心原理

理解 instanceof 的关键在于理解原型链。它的查找过程其实就是一个循环判断：

1. 取构造函数的 prototype 属性。
2. 取实例对象的 __proto__ 属性（隐式原型）。
3. 进行循环对比：
   • 如果两者相等，返回 true。
   • 如果不相等，继续沿着实例的 __proto__ 向上查找（找父类的 __proto__）。
   • 如果一直找到 null（原型链顶端）还没找到，返回 false。

function myInstanceof(left, right) {
  // 获取对象的原型
  let proto = Object.getPrototypeOf(left);
  // 获取构造函数的 prototype
  let prototype = right.prototype;

  // 循环查找
  while (true) {
    if (!proto) return false; // 找到头了
    if (proto === prototype) return true; // 找到了
    proto = Object.getPrototypeOf(proto); // 继续向上找
  }
}

3. 实际应用场景

在企业项目中，instanceof 主要用于运行时类型校验，以确保代码的健壮性。

(1) 处理多态参数与函数重载

在开发通用工具函数时，我们往往需要根据参数的不同类型执行不同的逻辑。

/**
 * 将输入数据转换为数组格式
 */
function normalizeToArray(input) {
  if (input instanceof Array) {
    // 如果已经是数组，直接返回
    return input;
  } else if (input instanceof NodeList) {
    // 如果是 DOM 节点列表（如 document.querySelectorAll 的结果）
    // NodeList 不是数组，没有 map, forEach 等方法
    return Array.from(input);
  } else {
    // 其他情况（字符串、数字、对象）包装成数组
    return [input];
  }
}

// 使用场景：UI 组件库开发
class Table {
  constructor(columns) {
    // 允许用户传入对象或数组，统一转换
    this.columns = normalizeToArray(columns);
  }
}

(2) 区分类似对象的结构

typeof 无法区分 Array、Date、RegExp 等对象，而 instanceof 可以轻松胜任。

function deepClone(value) {
  if (value instanceof Date) {
    return new Date(value); // 如果是日期，克隆一个新的日期对象
  }
  if (value instanceof RegExp) {
    return new RegExp(value); // 如果是正则，克隆一个新的正则对象
  }
  if (value instanceof Array) {
    return value.map(item => deepClone(item)); // 如果是数组，递归克隆
  }
  // ... 其他逻辑
}

(3) React 组件开发中的类型守卫

在 React 类组件生命周​​期或错误边界中，有时需要判断组件类型。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, info) {
    // 判断错误来源是否为特定的自定义错误类
    if (error instanceof NetworkError) {
      // 处理网络错误
      this.setState({ status: 'offline' });
    } else if (error instanceof AuthError) {
      // 处理鉴权错误
      this.setState({ status: 'unauthorized' });
    } else {
      this.setState({ status: 'unknown-error' });
    }
  }
}

(4) 全局异常捕获

在企业级应用的入口文件中，通常会有全局错误监控。

window.addEventListener('error', (event) => {
  if (event.error instanceof CustomBusinessError) {
    // 上报业务错误给监控后台
    reportToMonitor(event.error.code, event.error.message);
  } else {
    // 上报原生 JS 错误
    reportToMonitor('JS_RUNTIME', event.message);
  }
});

4. instanceof的局限性

虽然强大，但 instanceof 并非万能。在企业开发中，以下几个场景必须格外小心。

(1) 多全局环境问题（跨 iframe / 跨 window）

这是最隐蔽的 Bug。在浏览器中，每个 window 对象都有独立的运行环境。如果你的页面嵌入了 iframe，或者有父页面和子页面通信的场景，两个窗口的 Array 构造函数不是同一个引用。

// 主页面
const mainFrameArray = [];

// iframe 页面
const iframeArray = window.parent.frames[0].[];

console.log(iframeArray instanceof Array); // true (在当前环境没问题)
console.log(iframeArray instanceof mainFrameArray.constructor); // false！

解决方案 ：对于通用的库开发（如 Lodash, React.js），绝对不能使用 instanceof Array 来判断数组。应该使用 Object.prototype.toString.call() 或 Array.isArray()。

// ✅ 最佳实践
Array.isArray(myArray); 

(2) 原型链被修改

instanceof 依赖于原型链。如果原型链被人为修改，结果将不再可靠。

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

console.log(p1 instanceof Person); // true

// 修改原型链
Object.setPrototypeOf(p1, {});

console.log(p1 instanceof Person); // false

(3) 基本数据类型判断

instanceof 是基于对象的，不适用于基本数据类型（String, Number, Boolean）。

const str = 'hello';
console.log(str instanceof String); // false

const strObj = new String('hello');
console.log(strObj instanceof String); // true

注意 ：在日常开发中，我们很少使用 new String() 这种包装对象，所以不要用 instanceof 去判断 'hello' 这样的字面量。

5. 横向对比：如何选择类型判断方法？

方法	适用场景	优点	缺点
typeof	判断基本数据类型（String, Number, Function, Undefined）	简单、执行快	判断引用类型时全部返回 "object"（除 Function）
instanceof	判断对象 是否属于某个类 或构造函数	能区分类的实例、处理自定义类	跨 iframe/Window 失效、依赖原型链、无法判断基本类型
Array.isArray()	专门判断数组	准确、跨环境兼容	只能判断数组
Object.prototype.toString.call()	通用精准类型判断（内置对象 + 自定义对象）	最精准，不受环境影响	写法繁琐、性能稍差

总结与最佳实践：

1. 判断数组首选 Array.isArray() ：永远不要在生产代码中用 instanceof 或 typeof [] 来判断数组，防止 iframe 环境下的 Bug。
2. 对象区分用 instanceof ：当你需要区分自定义类（如 User vs Admin）或者区分 Date、RegExp 等内置对象时，instanceof 是最佳选择。
3. 基本类型用 typeof ：除了 null（可以用 === null），其他基本类型放心用 typeof。
4. 编写通用库时要谨慎 ：如果你开发的是要给别人用的 NPM 包，避免依赖 instanceof，除非你在文档中明确告知用户必须在同一全局环境下使用。