查看 / 下载 Markdown 源码

32. instanceof 背后的原理 副本.md

查看飞书原文 ↗3,423 字符

1. 核心概念 (Core Concept)

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。它本质上是一种原型链关系的检测。

2. 为什么需要它？ (The "Why")

3. API 与用法 (API & Usage)

instanceof 运算符的语法如下：

object instanceof constructor

它返回一个布尔值：true 表示 object 是 constructor 的实例（或继承自 constructor），false 则表示不是。

核心原理描述：

instanceof 的检测过程是一个循环遍历过程。它会沿着 object 的原型链向上查找，从 object.__proto__ 开始，然后是 object.__proto__.__proto__，以此类推，直到原型链的顶端（null）。在查找过程中，如果找到任何一个原型对象与 constructor.prototype 严格相等 (===)，则返回 true。如果遍历到原型链的末端仍未找到，则返回 false。

代码示例 (摘自 MDN / 核心原理模拟):

// 官方解释辅助理解
// (object instanceof constructor) 大致等价于以下过程
// 伪代码实现：
// function instanceof(object, constructor) {
//   let proto = object.__proto__; // 获取对象的原型
//   while (true) {
//     if (proto === null) { // 遍历到原型链顶端
//       return false;
//     }
//     if (proto === constructor.prototype) { // 找到匹配的原型
//       return true;
//     }
//     proto = proto.__proto__; // 继续向上查找原型链
//   }
// }

// 经典示例
function Animal(name) {
  this.name = name;
}

function Dog(name) {
  Animal.call(this, name); // 继承属性
}

// 建立原型链继承关系
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 恢复 constructor 属性

const myDog = new Dog("Buddy");
const myAnimal = new Animal("Generic");
const str = "hello";

console.log(myDog instanceof Dog);       // true
console.log(myDog instanceof Animal);    // true (因为 Dog 的原型链上包含 Animal.prototype)
console.log(myDog instanceof Object);    // true (因为原型链最终指向 Object.prototype)
console.log(str instanceof String);      // false (str 是原始类型，非 String 对象实例)
console.log(new String("hello") instanceof String); // true (这是 String 对象)
console.log([] instanceof Array);        // true
console.log([] instanceof Object);       // true
console.log(null instanceof Object);     // false (null 没有原型链)
console.log(undefined instanceof Object);// false (undefined 没有原型链)

注意：上面的伪代码 instanceof(object, constructor) 仅用于解释其原理，实际的 instanceof 运算符是引擎内置的，并非函数。__proto__ 属性在标准中已被 Object.getPrototypeOf() 替代使用。

4. 关键注意事项 (Key Considerations)

5. 参考资料 (References)

原文链接与附件索引