JavaScript Symbol 类型详解：原理、创建与三大核心应用场景

Symbol 类型概述

Symbol 是 ES6 规范中新增的一种基本数据类型。在引入 Symbol 之前，JavaScript 主要包含以下几种基础类型：

• Number
• String
• Boolean
• Null
• Undefined
• Object

与其他基础类型直观易懂的特性不同，Symbol 的具体含义及其实际用途往往让开发者感到困惑。

Symbol 的核心原理

什么是 Symbol

根据 JavaScript 标准，对象的键（key）仅允许为 String 或 Symbol 类型。两者的核心区别在于：String 类型的键允许重复，而 Symbol 类型的键具有唯一性。Symbol 的本质是一个唯一的标识符，每次调用创建函数时，生成的值都不会重复。其内部实现可视为一段极长的数字序列（例如：3423498431987719455...）。因此，Symbol 存在的唯一意义在于满足那些必须使用唯一值的场景需求。

Symbol 的创建方法

创建 Symbol

对于 Number、String 等基础类型，实例化通常有两种方式：通过构造函数（或称工厂函数）以及文字语法糖。例如：

// 构造函数 const num = Number(3); const str = String('hi');

// 语法糖 const num = 3; const str = 'hi';

显然，使用文字语法更为简洁。然而，Symbol 只能通过构造函数 Symbol() 进行创建，无法使用文字语法：

const sym = Symbol();

或者，我们可以传入一个字符串参数（descriptor）来描述该 Symbol：

const sym = Symbol('cat');


注意：传入的参数并不影响 Symbol 值的生成结果。即使每次传入相同的参数，生成的 Symbol 值依然不相等。该参数的作用仅限于描述被创建的 Symbol，以便在调试（debug）时识别其含义。因此，以下等式结果为 false：

Symbol('cat') === Symbol('cat') // false Symbol.for(key)

与 Symbol() 类似，Symbol.for(key) 也能创建 Symbol，但区别在于：创建的 Symbol 会注册到全局 Symbol 表中（即全局唯一）。如果全局表中已存在相同 key 的 Symbol，则直接返回该已存在的 Symbol。因此，以下等式结果为 true：

Symbol.for('cat') === Symbol.for('cat') // true

Symbol 的实际应用场景

如何使用 Symbol

Symbol 本身的机制很简单，但如何恰到好处地使用它却颇具挑战，因为日常开发中并非所有场景都非 Symbol 不可。然而，正确使用 Symbol 能显著提升代码质量。以下列举几种典型应用场景：

防止对象键名冲突

1. 用作对象的 key，防止命名冲突

使用 Symbol 作为对象的键（key），可以确保其与其他任何键都不重复。因此，Symbol 非常适合用于扩展对象属性。

例如，当使用 String 作为对象的键时，若出现重复的键名，后续属性会覆盖前面的属性：

const persons = {
 'bruce': 'wayne',
 'bruce': 'banner'
}

console.log(persons.bruce); // 'wayne'
使用Symbol作为Key可以避免这种情况：

const bruce1 = Symbol('bruce');
const bruce2 = Symbol('bruce');

const persons = {
 [bruce1]: 'wayne',
 [bruce2]: 'banner'
}

console.log(persons[bruce1]); // 'wayne'
console.log(persons[bruce2]); // 'banner'

JavaScript 的许多内置方法通过 Symbol 进行指定，例如：Symbol.iterator 指定了可迭代对象（iterable）的迭代器方法；Symbol.replace 指定了字符串替换方法。这类 Symbol 被称为“知名 Symbol”（Well-known Symbols），代表了 JavaScript 语言的内部行为。

定义严谨的枚举类型

2. 使用 Symbol 定义枚举

由于 JavaScript 原生不支持枚举类型，通常我们会使用一个冻结（frozen）的 Object 来模拟枚举，例如定义一个日期枚举：

const DAYS = Object.freeze({ monday: 1, tuesday: 2, wednesday: 3 });

此时有一个方法，接收 DAYS 的枚举值来返回当天要做的事：

function getTodo(day) {
 switch (day) {
  case DAYS.monday:
   return "看电影";
  case DAYS.tuesday:
   return "购物";
  case DAYS.wednesday:
   return "健身";
  default:
   return "日期错误";
 }
}

我们希望代码逻辑足够严谨，传入的参数必须严格符合 DAYS.monday 的形式，否则返回日期错误。然而，上述枚举类型的实现无法做到这一点。例如：getTodo(1) 依然能返回“看电影”的结果，因为数字 1 与 DAYS.monday 的值相等。

使用 Symbol 可以解决这一问题，DAYS 枚举类型可以重新定义为：

const DAYS = Object.freeze({ monday: Symbol('monday'), tuesday: Symbol('tuesday'), wednesday: Symbol('wednesday') });

此时，getTodo 方法必须接收 DAYS.monday 这样的枚举值作为参数，否则返回“日期错误”，因为世界上没有任何其他值与 DAYS.monday 相等。

这样定义的枚举显然更加严谨。

存储隐藏元数据

3. 使用 Symbol 存储元数据

键为 Symbol 类型的属性是不可枚举的，这是 Symbol 除唯一性外的第二大特性。因此，使用 for...in、Object.keys()、Object.hasOwnProperty() 等方法无法识别 Symbol 属性。简而言之，Symbol 属性对用户是“隐藏”的（尽管并非 private，因为仍可通过其他途径获取 Symbol 属性），例如：

因此，Symbol 作为“隐藏”属性可用于存储对象的元数据。例如，有一个 TodoList：

class TodoList {
 constructor() {
  // todo数量
  this.count = 0;
 }

 // 增加todo
 add(id, content) {
  this[id] = content;
  this.count++;
 }
}

const list = new TodoList();

我们使用 add() 方法向其中增加几个 todo：

list.add('a', '看电影'); list.add('b', '购物'); list.add('c', '健身');

当我们想使用 for...in 查看里面所有的 todo 时，会把 count 属性也带出来：

为了隐藏 count 属性，更方便地对 todo 进行操作，我们可以使用 Symbol 来存储它，TodoList 类修改为：

const count = Symbol('count'); class TodoList { constructor() { this[count] = 0; }

add(id, content) { this[id] = content; this[count]++; } }

当我们再遍历 TodoList 的时候，count 就隐藏了：

当我们想获取存储在 Symbol 中的元数据时，可以使用 Object.getOwnPropertySymbols() 方法：

以上是我能想到的 Symbol 的主要用途，如果大家有其他心得体会欢迎补充。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。