当前位置：首页 > article >正文

JS中的【Symbol】全面讲解

article 2024/11/18 13:28:10

1. 什么是 Symbol？

Symbol 是 ES6 引入的一种新的原始数据类型（Primitive Data Type）。与 string、number、boolean、null 和 undefined 一样，Symbol 是不可变的原始值。Symbol 的特殊之处在于它是唯一的，即使两个 Symbol 的描述相同，它们的值也不相等。

2. Symbol 的创建

Symbol 通过 Symbol() 函数创建，可以接受一个可选的字符串参数作为描述（description），用于调试或日志记录，但不影响 Symbol 的唯一性。

let sym1 = Symbol();
let sym2 = Symbol('foo');
let sym3 = Symbol('foo');

console.log(sym2 === sym3); // false

3. Symbol 的用途

作为对象属性的键（Key）： Symbol 最常见的用途之一是用作对象的属性键。由于每个 Symbol 都是唯一的，因此它可以确保属性不被意外覆盖或冲突。

let mySymbol = Symbol('myKey');
let obj = {};

obj[mySymbol] = 'value';
console.log(obj[mySymbol]); // 'value'

防止对象属性名冲突： 使用 Symbol 作为对象属性名可以避免在大型代码库或库之间发生属性名冲突。
实现迭代器（Iterators）： Symbol.iterator 是内置的 Symbol，用于定义对象的默认迭代器。当对象使用 for...of 循环遍历时会调用这个方法。

let iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 5) {
          return { value: step, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (let value of iterable) {
  console.log(value); // 1, 2, 3, 4, 5
}

元编程和反射（Reflection）： Symbol 还可以用来定义对象行为的某些方面，比如 Symbol.toPrimitive、Symbol.toStringTag 等，这些 Symbol 可以自定义对象的原生行为。

let obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return 10;
    }
    return null;
  }
};

console.log(+obj); // 10

4. 内置 Symbol

JavaScript 提供了一些内置的 Symbol，用于语言的内部机制。常见的内置 Symbol 包括：

Symbol.iterator：定义对象的默认迭代器。
Symbol.toPrimitive：对象转换为原始类型时调用的函数。
Symbol.toStringTag：修改 Object.prototype.toString() 的返回值。
Symbol.hasInstance：自定义 instanceof 操作符的行为。
Symbol.isConcatSpreadable：自定义数组 concat 方法是否展开对象。

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

let myArray = new MyArray(1, 2, 3);
let mappedArray = myArray.map(x => x * x);

console.log(mappedArray instanceof MyArray); // false
console.log(mappedArray instanceof Array);   // true

5. Symbol 的局限性

Symbol 无法被隐式转换为字符串或数字：使用 Symbol 作为字符串连接或数字运算时会抛出错误。这是为了防止意外的类型转换。

let sym = Symbol('foo');
console.log('Symbol is ' + sym); // TypeError: Cannot convert a Symbol value to a string

Symbol 的枚举性：使用 for...in 或 Object.keys() 遍历对象时，Symbol 属性是不可枚举的，但可以使用 Object.getOwnPropertySymbols() 来获取对象的 Symbol 属性。

let obj = {
  [Symbol('key')]: 'value'
};

console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(key) ]

Global Symbol 注册表：通过 Symbol.for() 和 Symbol.keyFor() 可以使用全局的 Symbol 注册表，这允许你跨文件或模块共享 Symbol。

let globalSym = Symbol.for('globalKey');
let globalSym2 = Symbol.for('globalKey');

console.log(globalSym === globalSym2); // true
console.log(Symbol.keyFor(globalSym)); // 'globalKey'