在 ES7 中，新增了一个叫做 Symbol.hasInstance 的方法，可以用于自定义 instanceof 操作符的行为，使其在判断某个对象是否是一个类的实例时，支持自定义规则，进一步提高了 JavaScript 的灵活性和可扩展性。
本文将介绍 Symbol.hasInstance 的基本用法和相关注意事项，同时针对一些常见的 Bug，给出解决方案和最佳实践。
什么是 Symbol.hasInstance？
Symbol.hasInstance 是一个内置的 Symbol，表示一个对象是否是某个类的实例。
它可以用于自定义 instanceof 操作符符号的行为，通过在类的原型对象上定义一个带有 Symbol.hasInstance 属性的方法，可以重定义 instanceof 操作符的行为，使其根据自定义规则进行判断。
例如，我们可以定义一个类 MyArray，它的 instanceof 运算符的行为将会根据自定义的规则进行判断：
class MyArray {
static [Symbol.hasInstance](instance) {
return Array.isArray(instance);
}
}
const myArr = [1, 2, 3];
console.log(myArr instanceof MyArray); // true使用 Symbol.hasInstance 的基本步骤
要使用 Symbol.hasInstance，需要遵循以下几个基本步骤：
- 定义一个类，并将它的原型对象上添加一个带有 Symbol.hasInstance 属性的方法。
- 在该方法中，定义自定义的判断逻辑，用于判断某个对象是否是该类的实例。
下面是一个具体的例子：
class MyClass {
static [Symbol.hasInstance](instance) {
// 判断 instance 是否满足自定义规则，可能包括一些属性或方法的检查
// 如果是，则返回 true，否则返回 false
}
}
// 判断某个对象是否是 MyClass 的实例
const obj = new MyClass();
console.log(obj instanceof MyClass); // false，因为还没有定义 Symbol.hasInstance 方法Symbol.hasInstance 的注意事项
尽管 Symbol.hasInstance 可以用于灵活地自定义 instanceof 操作符的行为，但在实际使用过程中，需要注意以下几个问题：
问题一：Symbol.hasInstance 只适用于静态方法
在类的实例对象上使用 instanceof 操作符时，会自动搜索该对象的原型链，查找其中包含的类或构造函数，以判断该对象是否是该类或构造函数的实例。
在使用 Symbol.hasInstance 自定义 instanceof 操作符的行为时，需要将自定义方法定义在类的原型对象上，并且它必须是一个静态方法，即用 static 关键字修饰，以确保该方法在通过 instanceof 调用时能够被正确识别。
以下是一个使用静态方法定义 Symbol.hasInstance 的例子：
class MyObject {
static [Symbol.hasInstance](instance) {
// 判断 instance 是否满足自定义规则，可能包括一些属性或方法的检查
// 如果是，则返回 true，否则返回 false
}
}问题二：Symbol.hasInstance 的返回值必须是布尔类型
Symbol.hasInstance 方法的返回值必须是一个布尔类型的值，即 true 或 false。如果返回的不是一个布尔值，则会抛出一个类型错误。
以下是一个非法的使用例子：
class MyClass {
static [Symbol.hasInstance](instance) {
return 'hello'; // 非法，返回值必须是一个布尔类型的值
}
}
const obj = new MyClass();
console.log(obj instanceof MyClass); // TypeError: 'MyClass' has no [Symbol.hasInstance]() method问题三：Symbol.hasInstance 必须是一个函数
Symbol.hasInstance 必须是一个函数类型的值，否则会抛出一个类型错误。这个函数的 this 值会自动绑定到该类的原型对象上，因此可以通过 this 操作符来访问该类的属性或方法。
以下是一个使用 this 操作符访问类属性的例子：
class MyClass {
static [Symbol.hasInstance](instance) {
return this.foo && this.bar;
}
static foo = true;
static bar = false;
}
const myObj = { foo: true, bar: false };
console.log(myObj instanceof MyClass); // true问题四：Symbol.hasInstance 的优先级比 instanceof 运算符高
当一个对象同时满足 Symbol.hasInstance 自定义规则和 instanceof 运算符的标准行为时， Symbol.hasInstance 的优先级会更高，也就是说，最终的 instanceof 判断结果将完全由 Symbol.hasInstance 决定。
以下是一个带有 Symbol.hasInstance 定义的类 MyObject，它的自定义规则是“该对象必须是一个字符串，并且包含字符 A”：
class MyObject {
static [Symbol.hasInstance](instance) {
return typeof instance === 'string' && instance.includes('A');
}
}
console.log('hello' instanceof MyObject); // false，没有包含字符 A
console.log('javascript' instanceof MyObject); // true，包含字符 A尽管 'javascript' 同时满足了 Symbol.hasInstance 的自定义规则和 instanceof 运算符的标准行为，但实际上它的 instanceof 判断结果是由 Symbol.hasInstance 决定的，因此最终的结果是 true。
常见 Bug 的解决方案和最佳实践
在使用 Symbol.hasInstance 时，可能会遇到一些常见的 bug，对于这些 bug，我们可以采用以下方式来解决：
Bug 一：自定义类中出现语法错误
使用 Symbol.hasInstance 自定义 instanceof 运算符的行为时，可能会出现语法错误，例如忘记使用 static 关键字定义静态方法，或者返回的值不是一个布尔类型等。
解决方案：遵循 Symbol.hasInstance 的使用规则，在类的原型对象上定义一个静态方法，并确保该方法的返回值是一个布尔类型数据。
以下是一个带有语法错误的例子：
class MyObject {
[Symbol.hasInstance](instance) { // 出错，忘记了 static 关键字
return typeof instance === 'string';
}
}
console.log('hello' instanceof MyObject); // TypeError: MyObject[Symbol.hasInstance] is not a functionBug 二：类原型对象被污染，导致 instanceof 行为异常
在使用 Symbol.hasInstance 自定义 instanceof 运算符的行为时，可能会污染类的原型对象，导致其他实例对象的 instanceof 行为异常。
解决方案：为每个实例对象创建一个新的类，或者将自定义规则定义为一个普通函数，避免污染类的原型对象。
以下是一个类原型对象被污染的例子：
class MyObject {
static [Symbol.hasInstance](instance) {
return typeof instance === 'string';
}
}
console.log('hello' instanceof MyObject); // true，符合自定义规则
console.log(123 instanceof MyObject); // false，不符合自定义规则
// 更改 MyObject 的原型对象，导致 instanceof 运算符的行为异常
MyObject.prototype = {};
console.log('hello' instanceof MyObject); // false，实例对象不再是 MyObject 类的实例
console.log(123 instanceof MyObject); // false，实例对象不再是 MyObject 类的实例Bug 三：自定义规则函数中使用不受支持的语法
在自定义规则函数中使用了不受支持的语法，例如箭头函数、模板字符串等，可能会导致功能失效或运行时报错。
解决方案：使用函数表达式或函数声明定义自定义规则函数，避免使用不受支持的语法。
以下是一个使用箭头函数导致的 Bug：
class MyObject {
static [Symbol.hasInstance] = (instance) => typeof instance === 'string';
}
console.log('hello' instanceof MyObject); // TypeError: MyObject[Symbol.hasInstance] is not a function因为箭头函数不支持 this 绑定和 arguments 属性，导致 Symbol.hasInstance 的使用错误，无法正确判断对象的类型。
正确的做法是使用函数表达式或函数声明定义 Symbol.hasInstance 方法：
class MyObject {
static [Symbol.hasInstance](instance) {
return typeof instance === 'string';
}
}总结
在 ES7 中，新增了 Symbol.hasInstance 方法，可以用于自定义 instanceof 操作符的行为，使其在判断某个对象是否是一个类的实例时，支持自定义规则。在使用 Symbol.hasInstance 时，需要注意一些问题和常见 Bug，但通过遵循规范和最佳实践，可以避免这些问题，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65acf5f2add4f0e0ff687cdb