JS `Well-Known Symbols` 的扩展与自定义行为重写

各位朋友，晚上好！我是你们的老朋友，今天咱们来聊点有意思的——JavaScript中的那些“Well-Known Symbols”。听起来很高大上，对不对？别怕，其实它们就像JavaScript世界里的VIP通行证，掌握了它们，你就能解锁一些隐藏的、强大的自定义行为。准备好了吗？咱们这就开始今天的“符号探险”！

第一章：啥是“Well-Known Symbols”？

首先，咱们得搞清楚“Well-Known Symbols”到底是个什么玩意儿。别被“Symbol”这个词吓到，它其实就是一种新的数据类型（ES6引入的），它最大的特点就是——唯一。也就是说，即使你创建两个Symbol('foo')，它们也绝对不会相等。

那么，“Well-Known Symbols”呢？它们是一些预定义的、特殊的Symbol，它们代表着一些JavaScript引擎内部的行为，你可以通过修改对象的这些Symbol属性，来影响对象的行为。

举个例子，Symbol.iterator就是一个Well-Known Symbol。当你调用一个对象的[Symbol.iterator]()方法时，它应该返回一个迭代器对象。迭代器对象允许你用for...of循环来遍历这个对象。

简单来说，Well-Known Symbols就像是JavaScript引擎预留的一些“接口”，你可以通过实现这些接口，来定制对象的行为。

第二章：常见的Well-Known Symbols及其应用

接下来，咱们来认识一些常见的Well-Known Symbols，以及它们的应用场景。

Symbol	描述	用途	示例
`Symbol.iterator`	指定一个对象的默认迭代器。 `for...of`循环会调用这个方法。	让对象可迭代，从而可以使用`for...of`循环。	`javascript const myObject = { data: [1, 2, 3], [Symbol.iterator]() { let index = 0; return { next: () => { if (index < this.data.length) { return { value: this.data[index++], done: false }; } else { return { value: undefined, done: true }; } } }; } }; for (const item of myObject) { console.log(item); // 输出 1, 2, 3 }`
`Symbol.toPrimitive`	一个方法，当对象被转换为原始值时调用。	控制对象在不同类型转换时的行为（比如转换为字符串、数字等）。	javascript const myObject = { value: 10, [Symbol.toPrimitive](hint) { if (hint === 'number') { return this.value; } if (hint === 'string') { return `Value is ${this.value}`; } return this.value; // 默认返回数值 } }; console.log(Number(myObject)); // 输出 10 console.log(String(myObject)); // 输出 "Value is 10" console.log(myObject + 5); // 输出 15 因为没有hint所以默认转换为number
`Symbol.toStringTag`	一个字符串，用于对象的`toString()`方法。	自定义`toString()`方法的返回值，让`Object.prototype.toString.call(obj)`返回更有意义的信息。	`javascript const myObject = { [Symbol.toStringTag]: 'MyObject' }; console.log(Object.prototype.toString.call(myObject)); // 输出 "[object MyObject]"`
`Symbol.hasInstance`	一个方法，用于自定义`instanceof`运算符的行为。	控制`instanceof`运算符的判断逻辑。	`javascript class MyClass { static [Symbol.hasInstance](obj) { return !!obj.myProperty; // 如果对象有myProperty属性，就返回true } } const obj1 = { myProperty: true }; const obj2 = {}; console.log(obj1 instanceof MyClass); // 输出 true console.log(obj2 instanceof MyClass); // 输出 false`
`Symbol.species`	一个属性，用于在继承类中指定构造函数。	允许子类覆盖父类的构造函数，在Array等内置对象的方法中，用于创建新的实例。	`javascript class MyArray extends Array { static get [Symbol.species]() { return Array; } } const myArray = new MyArray(1, 2, 3); const mappedArray = myArray.map(x => x * 2); console.log(mappedArray instanceof MyArray); // 输出 false console.log(mappedArray instanceof Array); // 输出 true //如果没有species， mappedArray instanceof MyArray 会返回true，因为map会返回一个新的MyArray实例`
`Symbol.isConcatSpreadable`	一个布尔值，用于指定一个对象是否应该被`Array.prototype.concat()`方法展开。	控制对象在`concat()`方法中的行为，决定是否将其元素添加到新数组中。	`javascript const arr1 = [1, 2]; const arr2 = [3, 4]; const obj = { 0: 5, 1: 6, length: 2, [Symbol.isConcatSpreadable]: false }; console.log(arr1.concat(arr2)); // 输出 [1, 2, 3, 4] console.log(arr1.concat(obj)); // 输出 [1, 2, {0: 5, 1: 6, length: 2, Symbol(Symbol.isConcatSpreadable): false}] //如果没有Symbol.isConcatSpreadable 那么concat会展开obj，输出 [1,2,5,6]`
`Symbol.match` ,`Symbol.replace`,`Symbol.search`,`Symbol.split`	这四个符号用于指定正则表达式在字符串中的匹配、替换、搜索和分割行为。	允许自定义对象拥有正则表达式的行为，可以实现更灵活的字符串处理。	`javascript class MyMatcher { constructor(value) { this.value = value; } [Symbol.match](str) { const index = str.indexOf(this.value); return index >= 0 ? [this.value] : null; } } const matcher = new MyMatcher('hello'); console.log('world hello'.match(matcher)); // 输出 ["hello"]`

这只是一部分常用的Well-Known Symbols。实际上，还有很多其他的符号，它们都代表着不同的行为。你可以在MDN文档中找到完整的列表。

第三章：自定义行为重写——实战演练

光说不练假把式，咱们来做几个实战演练，看看如何利用Well-Known Symbols来重写对象的行为。

场景一：让普通对象拥有数组的map方法

JavaScript中的Array对象拥有强大的map方法，可以将数组中的每个元素映射成一个新的元素。如果我们想让一个普通对象也拥有类似的功能，该怎么办呢？

const myObject = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
  map(callback) {
    const result = [];
    for (let i = 0; i < this.length; i++) {
      result.push(callback(this[i], i, this));
    }
    return result;
  }
};

const newArray = myObject.map(item => item.toUpperCase());
console.log(newArray); // 输出 ["A", "B", "C"]

虽然上面的代码可以实现类似的功能，但是它需要在对象上手动添加map方法。如果我们想更优雅地实现这个功能，可以使用Symbol.species。

class MyObject {
  constructor(data) {
    Object.assign(this, data);
    this.length = Object.keys(data).length;
  }

  static get [Symbol.species]() {
    return Array; // 返回Array构造函数
  }

  map(callback) {
    const result = new this.constructor[Symbol.species](); // 使用species指定的构造函数
    for (let i = 0; i < this.length; i++) {
      result.push(callback(this[i], i, this));
    }
    return result;
  }
}

const myObject = new MyObject({
  0: 'a',
  1: 'b',
  2: 'c'
});

const newArray = myObject.map(item => item.toUpperCase());
console.log(newArray); // 输出 ["A", "B", "C"]
console.log(newArray instanceof Array); // 输出 true

在这个例子中，我们定义了一个MyObject类，并设置了Symbol.species属性为Array。这样，当MyObject实例调用map方法时，会使用Array构造函数来创建新的数组。最终，map方法返回的是一个真正的Array实例。

场景二：自定义对象的toString()方法

默认情况下，对象的toString()方法返回的是[object Object]。如果我们想让它返回更有意义的信息，可以使用Symbol.toStringTag。

const myObject = {
  name: 'John',
  age: 30,
  [Symbol.toStringTag]: 'Person'
};

console.log(myObject.toString()); // 输出 "[object Person]"
console.log(Object.prototype.toString.call(myObject)); // 输出 "[object Person]"

在这个例子中，我们设置了Symbol.toStringTag属性为Person。这样，当调用myObject.toString()或Object.prototype.toString.call(myObject)时，就会返回[object Person]。

场景三：控制对象在concat()方法中的行为

默认情况下，Array.prototype.concat()会将数组中的元素添加到新数组中。如果我们想阻止某个对象被展开，可以使用Symbol.isConcatSpreadable。

const arr1 = [1, 2];
const obj = {
  0: 3,
  1: 4,
  length: 2,
  [Symbol.isConcatSpreadable]: false // 禁止展开
};

const newArray = arr1.concat(obj);
console.log(newArray); // 输出 [1, 2, {0: 3, 1: 4, length: 2, Symbol(Symbol.isConcatSpreadable): false}]

在这个例子中，我们设置了obj[Symbol.isConcatSpreadable]为false。这样，当concat()方法遇到obj时，不会将其元素添加到新数组中，而是将整个obj对象添加到新数组中。

第四章：注意事项与最佳实践

在使用Well-Known Symbols时，有一些注意事项和最佳实践需要牢记在心：

理解符号的含义： 在使用Well-Known Symbols之前，务必 thoroughly 理解其含义和作用。错误的使用可能会导致意想不到的结果。
避免过度使用： Well-Known Symbols 提供了强大的自定义能力，但不要过度使用。尽量保持代码的简洁性和可读性。
遵循规范： 在重写对象的行为时，尽量遵循JavaScript规范。比如，Symbol.iterator方法应该返回一个迭代器对象，迭代器对象应该包含next方法。
兼容性考虑： Well-Known Symbols 是 ES6 引入的特性。在使用时，需要考虑代码的兼容性。可以使用 Babel 等工具进行转译。
文档化你的代码： 如果你使用了 Well-Known Symbols 来重写对象的行为，一定要在代码中添加详细的注释，说明你的意图和实现方式。

第五章：总结与展望

好了，今天的“符号探险”就到此结束了。希望通过今天的讲解，大家对JavaScript中的Well-Known Symbols有了更深入的了解。

Well-Known Symbols 就像是JavaScript世界里的“魔法钥匙”，它们可以让你 unlock 一些隐藏的、强大的自定义行为。掌握了它们，你就可以编写出更灵活、更强大的JavaScript代码。

当然，Well-Known Symbols 只是 JavaScript 众多特性中的一小部分。还有很多其他的特性等待我们去探索和学习。希望大家能够保持学习的热情，不断提升自己的编程技能。

最后，感谢大家的聆听！如果大家有什么问题，欢迎随时提出。我们下次再见！

发表回复 取消回复

发表回复取消回复