JavaScript 教程：深入理解 instanceof 操作符-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01062/article/details/148416513

JavaScript 教程：深入理解 instanceof 操作符

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

什么是 instanceof 操作符？

instanceof 是 JavaScript 中用于检查对象与类关系的操作符，它能够判断一个对象是否属于某个类或其派生类。这个操作符在实际开发中非常有用，特别是在需要处理多态性（polymorphic）函数时，可以根据不同的对象类型执行不同的逻辑。

基本语法和使用方法

instanceof 的基本语法非常简单：

object instanceof Class

这个表达式会返回一个布尔值，表示对象是否是特定类的实例。

基础示例

class Animal {}
class Dog extends Animal {}

const myDog = new Dog();

console.log(myDog instanceof Dog);    // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true

从上面的例子可以看出，instanceof 会沿着原型链向上查找，因此派生类的实例也会被认为是基类的实例。

instanceof 的工作原理

理解 instanceof 的内部机制对于掌握它的行为非常重要。当执行 obj instanceof Class 时，JavaScript 引擎会：

首先检查 Class 是否有静态方法 Symbol.hasInstance，如果有则调用该方法
如果没有 Symbol.hasInstance，则检查 Class.prototype 是否出现在 obj 的原型链上

原型链检查过程

obj.__proto__ === Class.prototype?
obj.__proto__.__proto__ === Class.prototype?
obj.__proto__.__proto__.__proto__ === Class.prototype?
...

这个过程会一直持续，直到找到匹配或者到达原型链末端（null）。

自定义 instanceof 行为

通过定义 Symbol.hasInstance 静态方法，我们可以自定义 instanceof 的行为：

class MyClass {
  static [Symbol.hasInstance](instance) {
    return instance.hasSpecialProperty;
  }
}

const obj = { hasSpecialProperty: true };
console.log(obj instanceof MyClass); // true

与构造函数一起使用

instanceof 不仅适用于 ES6 的类，也可以用于传统的构造函数：

function Person(name) {
  this.name = name;
}

const john = new Person('John');
console.log(john instanceof Person); // true

内建对象的检查

instanceof 对于内建对象同样有效：

const arr = [1, 2, 3];
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object); // true

注意事项

原型修改的影响：如果在创建对象后修改了构造函数的 prototype 属性，instanceof 的结果可能会改变。

function Foo() {}
const foo = new Foo();

console.log(foo instanceof Foo); // true

Foo.prototype = {}; // 修改原型
console.log(foo instanceof Foo); // false

跨窗口/框架问题：在不同 iframe 或窗口间传递对象时，instanceof 可能不会按预期工作，因为每个环境有自己的内置对象副本。

替代方案：Object.prototype.toString

对于需要更精确类型检查的场景，可以使用 Object.prototype.toString 方法：

const toString = Object.prototype.toString;

console.log(toString.call([]));      // "[object Array]"
console.log(toString.call(123));     // "[object Number]"
console.log(toString.call(null));    // "[object Null]"
console.log(toString.call(undefined)); // "[object Undefined]"

自定义类型标签

通过 Symbol.toStringTag 可以自定义对象的类型标签：

class MyCollection {
  get [Symbol.toStringTag]() {
    return 'MyCollection';
  }
}

const coll = new MyCollection();
console.log(toString.call(coll)); // "[object MyCollection]"

不同类型检查方法比较

| 方法 | 适用场景 | 返回值类型 | |---------------------|----------------------------|-----------| | typeof | 原始数据类型检查 | string | | instanceof | 对象与类的关系检查 | boolean | | Object.prototype.toString | 精确类型检查，包括内建对象 | string |