ES9 中的 Symbol.hasInstance 方法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES9 中，新增了一个 Symbol.hasInstance 方法，它可以用于自定义对象的 instanceof 行为。在本文中，我们将深入探讨 Symbol.hasInstance 方法的用法和实现原理，并提供一些示例代码来帮助读者更好地理解它的应用。

Symbol.hasInstance 方法的用法

Symbol.hasInstance 方法是一个内置的 Symbol 值，可以用于自定义对象的 instanceof 行为。当一个对象使用 instanceof 运算符进行检测时，会调用该对象的 Symbol.hasInstance 方法，以确定该对象是否属于某个类。

具体来说，当一个对象 obj 被 instanceof 运算符检测时，会依次检查 obj 的原型链上的每个对象是否有 Symbol.hasInstance 方法，如果有，则调用该方法并传入 obj 作为参数。如果该方法返回 true，则表示 obj 属于该类，否则继续检查原型链上的下一个对象。

下面是一个简单的示例，演示如何使用 Symbol.hasInstance 方法自定义 instanceof 行为：

class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyArray); // true
console.log({} instanceof MyArray); // false

在上面的示例中，我们定义了一个名为 MyArray 的类，并使用 static 关键字定义了一个 Symbol.hasInstance 方法。该方法的实现很简单，只是调用了 Array.isArray 方法来检测传入的实例是否为数组。因此，当我们使用 instanceof 运算符检测一个数组时，会调用 MyArray 类的 Symbol.hasInstance 方法，从而返回 true。

Symbol.hasInstance 方法的实现原理

为了更好地理解 Symbol.hasInstance 方法的实现原理，我们需要先了解 JavaScript 中的 instanceof 运算符是如何工作的。

在 JavaScript 中， instanceof 运算符的工作原理可以简单地概括为以下三个步骤：

检查左操作数的原型链上是否存在右操作数的 prototype 属性。
如果存在，则返回 true，否则继续执行第 3 步。
重复步骤 1 和步骤 2，直到左操作数的原型链被完全遍历。

根据上面的描述，我们可以看出，instanceof 运算符实际上是在检查一个对象是否为另一个对象的实例。因此，如果我们想要自定义 instanceof 行为，就需要在对象的原型链上定义一个方法，以判断该对象是否属于某个类。

Symbol.hasInstance 方法就是用来实现这个目的的。在 ES9 中，当一个对象被 instanceof 运算符检测时，会依次检查该对象的原型链上的每个对象是否有 Symbol.hasInstance 方法，如果有，则调用该方法并传入该对象作为参数。如果该方法返回 true，则表示该对象属于该类，否则继续检查原型链上的下一个对象。

示例代码

下面是一些示例代码，演示如何使用 Symbol.hasInstance 方法自定义对象的 instanceof 行为：

自定义正则表达式的 instanceof 行为

class MyRegExp {
  static [Symbol.hasInstance](instance) {
    return typeof instance === 'object' && instance instanceof RegExp;
  }
}

console.log(/regex/ instanceof MyRegExp); // true
console.log('regex' instanceof MyRegExp); // false

在上面的示例中，我们定义了一个名为 MyRegExp 的类，并使用 static 关键字定义了一个 Symbol.hasInstance 方法。该方法的实现很简单，只是检查传入的实例是否为 RegExp 对象。因此，当我们使用 instanceof 运算符检测一个正则表达式时，会调用 MyRegExp 类的 Symbol.hasInstance 方法，从而返回 true。

自定义函数的 instanceof 行为

class MyFunction {
  static [Symbol.hasInstance](instance) {
    return typeof instance === 'function';
  }
}

console.log(() => {} instanceof MyFunction); // true
console.log({} instanceof MyFunction); // false

在上面的示例中，我们定义了一个名为 MyFunction 的类，并使用 static 关键字定义了一个 Symbol.hasInstance 方法。该方法的实现很简单，只是检查传入的实例是否为函数。因此，当我们使用 instanceof 运算符检测一个函数时，会调用 MyFunction 类的 Symbol.hasInstance 方法，从而返回 true。

自定义类的 instanceof 行为

// javascriptcn.com 代码示例
class Person {
  constructor(name) {
    this.name = name;
  }

  static [Symbol.hasInstance](instance) {
    return typeof instance === 'object' && instance.hasOwnProperty('name');
  }
}

class Employee extends Person {
  constructor(name, title) {
    super(name);
    this.title = title;
  }
}

const john = new Employee('John', 'Manager');
console.log(john instanceof Employee); // true
console.log(john instanceof Person); // true
console.log({ name: 'John' } instanceof Person); // false

在上面的示例中，我们定义了一个名为 Person 的类，并使用 static 关键字定义了一个 Symbol.hasInstance 方法。该方法的实现很简单，只是检查传入的实例是否具有 name 属性。因此，当我们使用 instanceof 运算符检测一个 Person 类的实例时，会调用 Person 类的 Symbol.hasInstance 方法，从而返回 true。

我们还定义了一个名为 Employee 的类，它继承自 Person 类。在 Employee 类的构造函数中，我们调用了父类的构造函数，并添加了一个 title 属性。因此，当我们使用 instanceof 运算符检测一个 Employee 类的实例时，会先检查该实例是否为 Person 类的实例，然后再检查是否为 Employee 类的实例，最终返回 true。

总结

Symbol.hasInstance 方法是 ES9 中的一个新特性，它可以用于自定义对象的 instanceof 行为。在本文中，我们深入探讨了 Symbol.hasInstance 方法的用法和实现原理，并提供了一些示例代码来帮助读者更好地理解它的应用。希望本文对您有所启发，有助于您更好地理解和应用 Symbol.hasInstance 方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657a975cd2f5e1655d4fe710