什么是 Symbol？
Symbol 是 ECMAScript 6（ES6）引入的一种新的原始数据类型 ，它表示独一无二的值。在 JavaScript 的八种数据类型中，Symbol 占据着特殊的地位。
JavaScript 的数据类型
简单数据类型：
- 传统数据类型：number、string、boolean、null、undefined
- ES6 新增：bigint、symbol
复杂数据类型：
- object（包括数组、函数等）
Symbol 的基本用法
创建 Symbol
使用 Symbol() 函数创建 Symbol，这是一个函数式声明，但返回的是简单数据类型，不需要使用 new 关键字：
javascript
// 构造函数，却是简单数据类型
const id1 = Symbol('');
console.log(typeof id1); // symbol
const id2 = Symbol('');
console.log(typeof id2); // symbol
// 独一无二的特性
console.log(id1 === id2); // falseSymbol 的描述参数
Symbol() 可以接受一个可选的字符串参数作为描述：
javascript
const wes = Symbol('Wes');
const person = Symbol('Wes');
console.log(wes == person); // false即使描述相同，创建的 Symbol 值也是不同的，这体现了 Symbol 的"独一无二"特性。
Symbol 属性的不可枚举性
Symbol 作为属性名时，不会被常规的遍历方法枚举到：
js
const classRoom = {
[Symbol('Mark')]: { grade: 50, gender: 'male' },
[Symbol('Oliva')]: { grade: 80, gender: 'female' },
[Symbol('oliva')]: { grade: 90, gender: 'female' },
zengsan: { grade: 70, gender: 'male' }
}
// 遍历对象用 for in
// symbol key 不可以被枚举
for (const person in classRoom) {
console.log(classRoom[person]);
}
// 只会输出: {grade: 70, gender: 'male'}获取 Symbol 属性
要获取对象的所有 Symbol 属性，需要使用专门的 API：
js
// 专属API Object.getOwnPropertySymbols() 可以获取对象所有的symbol key
const syms = Object.getOwnPropertySymbols(classRoom);
console.log(syms); // [Symbol(Mark), Symbol(Oliva), Symbol(oliva)]
const data = syms.map(item => classRoom[item]);
console.log(data);
// 输出: [{grade:50,gender:'male'}, {grade:80,gender:'female'}, {grade:90,gender:'female'}]Symbol 的实际应用详解
1. 作为对象的唯一键（避免命名冲突）
核心知识点：在多人协作的大型项目中，使用 Symbol 作为属性名可以彻底避免属性名冲突。
javascript
// 不同模块可能使用相同的属性名
const MODULE_A_KEY = Symbol('userData');
const MODULE_B_KEY = Symbol('userData');
const globalData = {
[MODULE_A_KEY]: { theme: 'dark', language: 'zh' },
[MODULE_B_KEY]: { cacheSize: 100, timeout: 5000 },
userData: '公共数据' // 字符串属性名可能被覆盖
};
console.log(globalData[MODULE_A_KEY]); // {theme: 'dark', language: 'zh'}
console.log(globalData[MODULE_B_KEY]); // {cacheSize: 100, timeout: 5000}
console.log(globalData.userData); // 公共数据
// 即使属性描述相同，也不会冲突
console.log(MODULE_A_KEY === MODULE_B_KEY); // false2. 实现真正的"私有"属性
核心知识点：Symbol 属性不会被常规方法枚举，提供了一定程度的"私有性"。
javascript
const _password = Symbol('password');
const _internalId = Symbol('internalId');
class User {
constructor(name, password) {
this.name = name;
this[_password] = password; // "私有"属性
this[_internalId] = this._generateId();
}
_generateId() {
return Math.random().toString(36).substr(2, 9);
}
// 只能通过方法访问"私有"属性
validatePassword(inputPassword) {
return this[_password] === inputPassword;
}
// 常规方法无法枚举到Symbol属性
toJSON() {
const obj = {};
for (const key in this) {
if (typeof this[key] !== 'symbol') {
obj[key] = this[key];
}
}
return obj;
}
}
const user = new User('张三', '123456');
console.log(user.name); // 张三
console.log(user[_password]); // 123456 (但外部通常不知道这个Symbol)
console.log(user.validatePassword('123456')); // true
// JSON.stringify 不会包含Symbol属性
console.log(JSON.stringify(user)); // {"name":"张三"}
// for...in 循环也不会枚举Symbol属性
for (let key in user) {
console.log(key); // 只输出: name
}3. 定义类的内部方法和元数据
核心知识点：使用 Symbol 定义类的内部实现细节，避免被外部误用。
javascript
// 定义"私有"方法
const _validate = Symbol('validate');
const _formatData = Symbol('formatData');
class ApiService {
constructor() {
this.endpoint = 'https://api.example.com';
}
// 公共方法
async fetchData(url) {
const response = await fetch(`${this.endpoint}${url}`);
const data = await response.json();
return this[_formatData](data);
}
// "私有"方法 - 使用Symbol定义
[_validate](data) {
return data && typeof data === 'object';
}
[_formatData](data) {
if (this[_validate](data)) {
return { success: true, data };
}
return { success: false, error: 'Invalid data' };
}
}
const api = new ApiService();
// api[_validate] 和 api[_formatData] 在外部难以访问，实现了信息隐藏4. 注册表全局 Symbol
核心知识点 ：使用 Symbol.for() 和 Symbol.keyFor() 创建和查找全局 Symbol。
javascript
// Symbol.for() 会在全局Symbol注册表中查找或创建Symbol
const globalSym1 = Symbol.for('app.config');
const globalSym2 = Symbol.for('app.config');
console.log(globalSym1 === globalSym2); // true
// 应用：全局配置共享
const CONFIG_KEY = Symbol.for('myapp.config');
// 在不同文件中共享同一个配置Symbol
function setGlobalConfig(config) {
global[CONFIG_KEY] = config;
}
function getGlobalConfig() {
return global[CONFIG_KEY];
}
// 获取Symbol的描述键名
console.log(Symbol.keyFor(CONFIG_KEY)); // 'myapp.config'5. 内置 Symbol 值（Well-known Symbols）
核心知识点：JavaScript 内置了一些 Symbol 值，用于控制对象的行为。
javascript
// Symbol.iterator - 定义对象的迭代器
const myIterable = {
[Symbol.iterator]: function* () {
yield 1;
yield 2;
yield 3;
}
};
for (let value of myIterable) {
console.log(value); // 1, 2, 3
}
// Symbol.toStringTag - 自定义对象的toString标签
class MyClass {
get [Symbol.toStringTag]() {
return 'MyClass';
}
}
const instance = new MyClass();
console.log(instance.toString()); // [object MyClass]
// Symbol.hasInstance - 自定义instanceof行为
class MyArray {
static [Symbol.hasInstance](instance) {
return Array.isArray(instance);
}
}
console.log([] instanceof MyArray); // true6. 实际项目中的完整示例
javascript
// 用户权限系统 - 使用Symbol避免权限名冲突
const PERMISSIONS = {
READ: Symbol('READ'),
WRITE: Symbol('WRITE'),
DELETE: Symbol('DELETE'),
ADMIN: Symbol('ADMIN')
};
const _permissions = Symbol('permissions');
class User {
constructor(name) {
this.name = name;
this[_permissions] = new Set();
}
grantPermission(permission) {
this[_permissions].add(permission);
}
hasPermission(permission) {
return this[_permissions].has(permission);
}
getPermissions() {
return Array.from(this[_permissions]);
}
}
const user = new User('Alice');
user.grantPermission(PERMISSIONS.READ);
user.grantPermission(PERMISSIONS.WRITE);
console.log(user.hasPermission(PERMISSIONS.READ)); // true
console.log(user.hasPermission(PERMISSIONS.DELETE)); // false
// 权限数据被保护，外部难以直接修改
console.log(user[_permissions]); // 需要知道具体的Symbol才能访问Symbol 的优势总结
- 唯一性：每个 Symbol 值都是唯一的，不会与其他值冲突
- 安全性：Symbol 属性不会被意外覆盖
- 隐私性：Symbol 属性不会被常规方法枚举，适合存储内部数据
- 协作友好：在大型项目和多开发者协作中，避免命名冲突
- 元编程能力：通过内置 Symbol 值控制对象的核心行为
注意事项
- Symbol 属性需要使用
Object.getOwnPropertySymbols()获取 - Symbol 不会被
JSON.stringify()序列化 - Symbol 不会被
for...in、Object.keys()等常规方法枚举 - 使用
Symbol.for()可以创建全局共享的 Symbol
通过合理使用 Symbol，可以编写出更加健壮、可维护的 JavaScript 代码，特别是在大型项目和框架开发中，Symbol 的价值更加明显。