Symbol是 ES6 新增的一种原始数据类型它的最大特点是值唯一通常用来定义不会冲突的标识一、先理解 Symbol 是什么const s1 Symbol() const s2 Symbol() console.log(s1 s2) // false即使两个Symbol()写法一样它们也是完全不同的值。你也可以加描述方便调试const s Symbol(id) console.log(s) // Symbol(id)注意这个id只是描述不影响唯一性const a Symbol(id) const b Symbol(id) console.log(a b) // false二、Symbol 常见使用场景1. 作为对象属性名避免命名冲突这是Symbol最常见的用途。场景当多个模块往同一个对象上挂属性时普通字符串属性名可能冲突。示例const key1 Symbol(name) const key2 Symbol(name) const obj { [key1]: 张三, [key2]: 李四 } console.log(obj[key1]) // 张三 console.log(obj[key2]) // 李四如果用字符串const obj { name: 张三, name: 李四 } console.log(obj.name) // 李四后面的会把前面的覆盖掉。适合场景组件库内部挂私有字段框架内部给对象打标记多人协作开发时防止属性重名2. 定义“伪私有”属性虽然Symbol不能真正做到私有但它可以让属性不容易被外部直接访问到。const privateKey Symbol(private) const user { name: Tom, [privateKey]: 这是内部数据 } console.log(user.name) // Tom console.log(user[privateKey]) // 这是内部数据外部如果不知道privateKey这个 Symbol就很难直接拿到这个值。注意它不是绝对私有因为仍然可以通过Object.getOwnPropertySymbols(user)取出来。所以它更像是隐藏避免误操作内部约定字段而不是严格安全私有。3. 消除魔法字符串增强语义有时候我们需要定义一组不会重复的常量Symbol很适合。示例状态常量const STATUS { PENDING: Symbol(pending), SUCCESS: Symbol(success), FAILED: Symbol(failed) } let state STATUS.PENDING if (state STATUS.PENDING) { console.log(处理中) }这样做的好处不会和别的值混淆不容易误传常量语义更明确如果用字符串const STATUS { PENDING: pending }虽然也可以但字符串容易被随便写错、复用或冲突。4. 在框架或库中做内部标识很多框架、源码中喜欢用Symbol给对象打“类型标记”。示例const COMPONENT Symbol(component) function createComponent(options) { return { [COMPONENT]: true, ...options } } const comp createComponent({ name: Button }) console.log(comp[COMPONENT]) // true这样可以判断某个对象是不是特定类型function isComponent(obj) { return !!obj[COMPONENT] }常见用途判断对象是否为响应式对象标识 vnode标识组件实例标识某种特殊对象类型这个场景在源码里特别常见。5. 自定义对象行为配合内置 Symbol 使用JavaScript 还提供了一些内置 Symbol可以让你改变对象在某些场景下的默认行为。这是Symbol非常重要的一类用法。5.1Symbol.iterator让对象可迭代如果一个对象实现了Symbol.iterator它就可以被for...of遍历。const obj { data: [1, 2, 3], [Symbol.iterator]() { let index 0 const data this.data return { next() { if (index data.length) { return { value: data[index], done: false } } return { value: undefined, done: true } } } } } for (const item of obj) { console.log(item) }输出1 2 3使用场景自定义迭代器封装数据结构让类数组对象支持for...of5.2Symbol.toStringTag自定义类型标签const obj { [Symbol.toStringTag]: User } console.log(Object.prototype.toString.call(obj)) // [object User]使用场景自定义对象类型显示库内部做类型识别增强5.3Symbol.toPrimitive控制对象转原始值行为const obj { [Symbol.toPrimitive](hint) { if (hint number) return 100 if (hint string) return hello return default value } } console.log(obj) // 100 console.log(${obj}) // hello console.log(obj ) // default value使用场景自定义对象的数字/字符串转换逻辑某些特殊业务对象封装5.4Symbol.hasInstance自定义instanceof行为class MyClass { static [Symbol.hasInstance](obj) { return obj obj.isMyClass true } } const obj { isMyClass: true } console.log(obj instanceof MyClass) // true使用场景自定义类型判断规则5.5Symbol.species控制派生对象的方法返回什么构造器实例常见于继承内置类时。这个场景平时业务开发不常用但在类库设计里可能会用到。5.6Symbol.match/Symbol.replace/Symbol.search/Symbol.split这些可以影响字符串方法对对象的处理方式。比如让某个对象能参与matchconst matcher { [Symbol.match](str) { return str.includes(vue) ? [vue] : null } } console.log(I love vue.match(matcher)) // [vue]使用场景高级字符串匹配封装DSL 或工具库设计6. 作为依赖注入的 key这个在 Vue、Nest、一些框架设计中非常常见。比如 Vue3 中provide/inject为了防止 key 冲突经常使用Symbol。示例const userKey Symbol(user) provide(userKey, { name: Tom }) const user inject(userKey)为什么适合因为如果你用字符串provide(user, data)很容易和别的模块命名重复。而Symbol天然唯一更安全。适合场景provide/injectIOC 容器插件系统全局上下文共享 key7. 注册全局唯一标识Symbol.for普通Symbol()每次都会创建新值。如果你希望在全局范围内复用同一个 Symbol可以使用Symbol.for()。const a Symbol.for(token) const b Symbol.for(token) console.log(a b) // true它会从全局注册表中查找没有就创建有就复用。使用场景跨模块共享标识插件系统约定统一 key大型项目中多个文件共享同一个 Symbol还可以反查 keyconst s Symbol.for(token) console.log(Symbol.keyFor(s)) // token三、实际开发中最常见的几个场景如果从“日常业务开发”角度看最常用的其实就这几类1. 作为对象唯一 keyconst idKey Symbol(id) obj[idKey] 1232. 作为框架/组件内部标识const FLAG Symbol(flag) obj[FLAG] true3. 作为 provide/inject 或依赖注入 keyconst themeKey Symbol(theme)4. 实现可迭代对象obj[Symbol.iterator] function () {}四、什么时候适合用 Symbol适合用Symbol的情况你需要一个绝对唯一的标识你不希望对象属性名和别人冲突你在做框架/组件库/工具库你要做依赖注入 key你想自定义对象的一些底层行为五、什么时候不适合用 Symbol以下情况一般没必要用1. 普通业务字段const user { name: 张三, age: 18 }这种正常属性没必要用Symbol。2. 需要被 JSON 序列化的数据Symbol作为属性名时JSON.stringify会忽略。const key Symbol(id) const obj { [key]: 1, name: Tom } console.log(JSON.stringify(obj)) // {name:Tom}所以如果这个数据需要传给后端不要把核心业务字段定义成Symbol。3. 需要频繁遍历、展示的字段Symbol属性不会被for...inObject.keys()Object.entries()直接枚举出来。const key Symbol(id) const obj { [key]: 123, name: Tom } console.log(Object.keys(obj)) // [name]要获取 Symbol 属性需要Object.getOwnPropertySymbols(obj)所以如果你希望属性是“公开可枚举”的就不适合用Symbol。六、Symbol 和字符串 key 的区别对比项stringSymbol是否可重复可以重复每个值唯一作为对象 key 是否易冲突容易不易是否能被Object.keys枚举能不能是否能 JSON 序列化能不能适合做公开业务字段适合不适合适合做内部标识一般非常适合七、一个实际例子假设你在封装一个表单组件库想给字段对象打标记const FIELD_TOKEN Symbol(field) function createField(config) { return { [FIELD_TOKEN]: true, ...config } } function isField(obj) { return !!obj[FIELD_TOKEN] } const field createField({ label: 用户名, prop: username }) console.log(isField(field)) // true这样不会污染用户正常字段不会和labelproptypename这些属性冲突。八、总结一句话理解Symbol最核心的价值就是创建唯一标识避免命名冲突。最常见使用场景作为对象唯一属性名作为内部私有/隐藏标记作为依赖注入 key作为状态常量自定义对象底层行为如Symbol.iterator业务开发建议如果你是普通业务项目可以重点掌握这几个Symbol()创建唯一 keySymbol.for()创建可共享 keySymbol.iteratorVue3 中配合provide/inject使用
