JavaScript 中的 Symbol 特性详解

1. 什么是 Symbol？

Symbol 是 ECMAScript 6 引入的一种新的原始数据类型，表示唯一的值。它是 JavaScript 的第七种数据类型（前六种是：undefined、null、布尔值、字符串、数值、对象）。

javascript 复制代码

// 创建 Symbol
let sym1 = Symbol();
let sym2 = Symbol();
console.log(sym1 === sym2); // false - 每个 Symbol 都是唯一的

// 可以添加描述（仅用于调试）
let sym3 = Symbol('description');
let sym4 = Symbol('description');
console.log(sym3 === sym4); // false - 即使描述相同，Symbol 也不同

2. 创建 Symbol 的方法

2.1 基本创建方式

javascript 复制代码

// 直接创建
const symbol1 = Symbol();

// 带描述创建
const symbol2 = Symbol('id');
const symbol3 = Symbol('id');

// 使用 Symbol.for() 创建全局 Symbol
const symbol4 = Symbol.for('globalKey'); // 全局注册
const symbol5 = Symbol.for('globalKey'); // 返回已存在的 Symbol
console.log(symbol4 === symbol5); // true

// Symbol.keyFor() 获取全局 Symbol 的键
console.log(Symbol.keyFor(symbol4)); // 'globalKey'
console.log(Symbol.keyFor(symbol2)); // undefined - 非全局 Symbol

2.2 常用内置 Symbol

javascript 复制代码

// Symbol.iterator - 定义对象的默认迭代器
const iterableObj = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

// Symbol.toStringTag - 自定义 Object.prototype.toString() 的返回值
class MyClass {
  get [Symbol.toStringTag]() {
    return 'MyClass';
  }
}
console.log(Object.prototype.toString.call(new MyClass())); // [object MyClass]

// Symbol.hasInstance - 自定义 instanceof 操作符的行为
class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}
console.log([] instanceof MyArray); // true

3. Symbol 的主要特性

3.1 唯一性

javascript 复制代码

const obj = {};
const key1 = Symbol('key');
const key2 = Symbol('key');

obj[key1] = 'value1';
obj[key2] = 'value2';

console.log(obj[key1]); // 'value1'
console.log(obj[key2]); // 'value2'
console.log(Object.keys(obj)); // [] - Symbol 属性不会出现在常规遍历中

3.2 不可枚举性（默认）

javascript 复制代码

const obj = {
  regularProp: 'regular',
  [Symbol('symbolProp')]: 'symbol'
};

// for...in 循环
for (let key in obj) {
  console.log(key); // 只输出 'regularProp'
}

// Object.keys()
console.log(Object.keys(obj)); // ['regularProp']

// Object.getOwnPropertyNames()
console.log(Object.getOwnPropertyNames(obj)); // ['regularProp']

// 获取 Symbol 属性
const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // [Symbol(symbolProp)]

3.3 用作对象属性的优势

javascript 复制代码

// 避免属性名冲突
const user = {
  name: 'John',
  [Symbol('id')]: 12345,
  [Symbol('id')]: 67890  // 不会覆盖前一个
};

// 模拟私有属性（不是真正的私有，但提供了命名空间的隔离）
const ageSymbol = Symbol('age');
class Person {
  constructor(name, age) {
    this.name = name;
    this[ageSymbol] = age;
  }
  
  getAge() {
    return this[ageSymbol];
  }
}

const person = new Person('Alice', 30);
console.log(person.name); // 'Alice'
console.log(person.age); // undefined
console.log(person.getAge()); // 30

4. Symbol 的实用场景

4.1 实现常量

javascript 复制代码

// 传统方式 - 可能被意外修改
const COLOR_RED = 'RED';
const COLOR_GREEN = 'GREEN';

// Symbol 方式 - 确保唯一性
const COLOR_RED = Symbol('RED');
const COLOR_GREEN = Symbol('GREEN');

function getColor(color) {
  switch(color) {
    case COLOR_RED:
      return '#ff0000';
    case COLOR_GREEN:
      return '#00ff00';
    default:
      return '#000000';
  }
}

4.2 定义对象元数据

javascript 复制代码

const CACHE_KEY = Symbol('cache');

function withCache(fn) {
  return function(...args) {
    if (!this[CACHE_KEY]) {
      this[CACHE_KEY] = new Map();
    }
    
    const key = JSON.stringify(args);
    if (this[CACHE_KEY].has(key)) {
      return this[CACHE_KEY].get(key);
    }
    
    const result = fn.apply(this, args);
    this[CACHE_KEY].set(key, result);
    return result;
  };
}

class Calculator {
  @withCache
  heavyCalculation(x, y) {
    console.log('Calculating...');
    return x * y;
  }
}

4.3 定义协议接口

javascript 复制代码

// 自定义迭代协议
class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }
  
  [Symbol.iterator]() {
    let current = this.start;
    const end = this.end;
    
    return {
      next() {
        if (current <= end) {
          return { value: current++, done: false };
        }
        return { done: true };
      }
    };
  }
}

const range = new Range(1, 5);
console.log([...range]); // [1, 2, 3, 4, 5]

5. Symbol 的 API 总结

5.1 静态属性

javascript 复制代码

// 内置 Symbol
Symbol.iterator
Symbol.asyncIterator
Symbol.match
Symbol.replace
Symbol.search
Symbol.split
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.unscopables
Symbol.species
Symbol.toPrimitive
Symbol.toStringTag

5.2 静态方法

javascript 复制代码

// Symbol.for(key)
const globalSym = Symbol.for('app.unique');

// Symbol.keyFor(sym)
const key = Symbol.keyFor(globalSym); // 'app.unique'

// Symbol.hasInstance
// Symbol.isConcatSpreadable
// 等其他内置 Symbol

5.3 实例方法

javascript 复制代码

const sym = Symbol('test');

// toString()
console.log(sym.toString()); // "Symbol(test)"

// valueOf()
console.log(sym.valueOf() === sym); // true

// description (ES2019)
console.log(sym.description); // "test"

6. 注意事项

6.1 类型转换

javascript 复制代码

const sym = Symbol('test');

// 不能转换为数字
console.log(Number(sym)); // TypeError

// 可以转换为字符串
console.log(String(sym)); // "Symbol(test)"
console.log(sym.toString()); // "Symbol(test)"

// 可以转换为布尔值
console.log(Boolean(sym)); // true
console.log(!sym); // false

6.2 属性访问

javascript 复制代码

const obj = {};
const sym = Symbol('key');

obj[sym] = 'value';

// 正确的访问方式
console.log(obj[sym]); // 'value'

// 错误的方式
console.log(obj.sym); // undefined

6.3 克隆和序列化

javascript 复制代码

const obj = {
  regular: 'value',
  [Symbol('symbol')]: 'symbolValue'
};

// JSON.stringify 会忽略 Symbol 属性
console.log(JSON.stringify(obj)); // '{"regular":"value"}'

// 扩展运算符会复制 Symbol 属性
const cloned = { ...obj };
console.log(Object.getOwnPropertySymbols(cloned).length); // 1

7. 实际应用示例

7.1 实现单例模式

javascript 复制代码

const singletonKey = Symbol.for('app.singleton');

class Singleton {
  constructor() {
    const instance = this.constructor[singletonKey];
    if (instance) {
      return instance;
    }
    this.constructor[singletonKey] = this;
  }
}

const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1 === s2); // true

7.2 元编程

javascript 复制代码

// 使用 Symbol.toPrimitive 控制对象到原始值的转换
const obj = {
  value: 10,
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') {
      return this.value;
    }
    if (hint === 'string') {
      return `Value: ${this.value}`;
    }
    return this.value;
  }
};

console.log(Number(obj)); // 10
console.log(String(obj)); // "Value: 10"
console.log(obj + 5); // 15

总结

Symbol 的主要特点：

唯一性：每个 Symbol 都是唯一的，避免命名冲突
隐私性：Symbol 属性默认不可枚举，提供一定程度的属性隐藏
协议性：内置 Symbol 用于定义和扩展 JavaScript 对象的行为
不可变性：Symbol 值创建后不可修改

Symbol 是现代 JavaScript 编程中重要的元编程工具，特别适用于：

定义对象内部方法（如迭代器）
创建不会冲突的属性名
实现自定义类型转换
定义框架或库的内部协议

正确使用 Symbol 可以提高代码的可维护性和健壮性，避免属性名冲突，并实现更优雅的元编程模式。