JavaScript中`Symbol.for()`和`Symbol()`的区别，在创建全局唯一的`Symbol`值时如何选择使用？

引言

在前端开发的浩瀚宇宙中，JavaScript 一直是那颗最耀眼的明星。而在 JavaScript 的众多特性里，Symbol 类型就像是隐藏在深处的神秘宝藏，能为我们的代码带来意想不到的威力。今天，咱们就来聊聊 Symbol() 和 Symbol.for() 这两个创建 Symbol 值的方法，看看它们到底有啥区别，以及在创建全局唯一的 Symbol 值时该怎么选。

1. 什么是 Symbol？

在正式开聊之前，咱们得先搞清楚 Symbol 是啥。简单来说，Symbol 是 JavaScript 里的一种原始数据类型，它的值是独一无二的，不会与其他任何值冲突。这就好比每个人都有一个独一无二的身份证号，Symbol 就是值的"身份证号"。

咱们先来看个简单的 Symbol() 示例：

// 创建一个新的 Symbol 值
const symbol1 = Symbol();
// 创建另一个新的 Symbol 值
const symbol2 = Symbol();

// 比较两个 Symbol 值，即使它们看起来一样，但实际上是不同的
console.log(symbol1 === symbol2); // 输出 false

从上面的代码可以看出，每次调用 Symbol() 都会创建一个全新的、独一无二的 Symbol 值。

2. Symbol() 和 Symbol.for() 的基本用法

2.1 Symbol()

Symbol() 是创建 Symbol 值最直接的方法。每次调用它，都会返回一个全新的、独一无二的 Symbol 值。这个值可以作为对象的属性名，这样就能避免属性名冲突的问题。

// 创建一个新的 Symbol 值，并添加描述
const mySymbol = Symbol('这是一个 Symbol 描述');
// 创建一个对象
const myObject = {};
// 使用 Symbol 作为对象的属性名
myObject[mySymbol] = '这是属性值';

// 访问对象的属性
console.log(myObject[mySymbol]); // 输出 '这是属性值'

在这个例子中，mySymbol 是一个独一无二的 Symbol 值，用它作为对象的属性名，可以确保不会和其他属性名冲突。

2.2 Symbol.for()

Symbol.for() 则是用来创建或获取全局注册表中的 Symbol 值。它接受一个字符串作为参数，这个字符串就是 Symbol 的"键"。如果注册表中已经存在这个"键"对应的 Symbol 值，就返回这个值；如果不存在，就创建一个新的 Symbol 值并注册到全局注册表中。

// 创建一个全局的 Symbol 值
const globalSymbol1 = Symbol.for('globalSymbolKey');
// 再次获取同一个全局的 Symbol 值
const globalSymbol2 = Symbol.for('globalSymbolKey');

// 比较两个 Symbol 值，它们是相等的
console.log(globalSymbol1 === globalSymbol2); // 输出 true

从这个例子可以看出，Symbol.for() 可以让我们在不同的代码块中获取到同一个 Symbol 值，这在需要全局共享 Symbol 值的场景中非常有用。

3. 两者的区别

3.1 唯一性范围

Symbol() 创建的 Symbol 值是局部唯一的，也就是说，每个 Symbol() 调用都会返回一个全新的、独一无二的值，即使描述相同也不例外。

// 创建两个描述相同的 Symbol 值
const symbolA = Symbol('相同描述');
const symbolB = Symbol('相同描述');

// 比较两个 Symbol 值，它们是不相等的
console.log(symbolA === symbolB); // 输出 false

而 Symbol.for() 创建的 Symbol 值是全局唯一的，只要"键"相同，返回的就是同一个 Symbol 值。

// 创建两个使用相同键的全局 Symbol 值
const globalSymbolA = Symbol.for('sameGlobalKey');
const globalSymbolB = Symbol.for('sameGlobalKey');

// 比较两个 Symbol 值，它们是相等的
console.log(globalSymbolA === globalSymbolB); // 输出 true

3.2 注册表

Symbol() 创建的 Symbol 值不会被注册到全局注册表中，因此无法通过 Symbol.keyFor() 方法获取其描述。

// 创建一个 Symbol 值
const localSymbol = Symbol('本地描述');
// 尝试获取该 Symbol 值的键，返回 undefined
console.log(Symbol.keyFor(localSymbol)); // 输出 undefined

而 Symbol.for() 创建的 Symbol 值会被注册到全局注册表中，可以通过 Symbol.keyFor() 方法获取其"键"。

// 创建一个全局 Symbol 值
const registeredSymbol = Symbol.for('registeredKey');
// 获取该 Symbol 值的键
console.log(Symbol.keyFor(registeredSymbol)); // 输出 'registeredKey'

3.3 性能

Symbol() 每次调用都会创建一个新的 Symbol 值，因此性能开销相对较小，适合在需要创建大量局部唯一 Symbol 值的场景中使用。

而 Symbol.for() 需要先在全局注册表中查找是否存在对应的 Symbol 值，如果不存在才会创建新的，因此性能开销相对较大。不过，在需要全局共享 Symbol 值的场景中，这点性能开销是值得的。

4. 在创建全局唯一的 Symbol 值时如何选择

现在咱们已经清楚了 Symbol() 和 Symbol.for() 的区别，那么在创建全局唯一的 Symbol 值时，该怎么选择呢？

如果只是在局部作用域内需要一个独一无二的 Symbol 值，比如作为对象的私有属性名，避免属性名冲突，那么就用 Symbol()。

// 创建一个类
class MyClass {
    // 创建一个局部唯一的 Symbol 值作为私有属性名
    static #privateSymbol = Symbol('私有属性');
    constructor() {
        this[MyClass.#privateSymbol] = '这是私有属性值';
    }
    getPrivateValue() {
        return this[MyClass.#privateSymbol];
    }
}

const myInstance = new MyClass();
console.log(myInstance.getPrivateValue()); // 输出 '这是私有属性值'

在这个例子中，#privateSymbol 是一个局部唯一的 Symbol 值，作为 MyClass 的私有属性名，确保不会和其他属性名冲突。

如果需要在不同的代码块、不同的模块中共享同一个 Symbol 值，那么就用 Symbol.for()。

// 模块 A
const sharedSymbol = Symbol.for('sharedKey');
// 模块 B
const sameSharedSymbol = Symbol.for('sharedKey');

// 比较两个 Symbol 值，它们是相等的
console.log(sharedSymbol === sameSharedSymbol); // 输出 true

在这个例子中，模块 A 和模块 B 通过 Symbol.for() 共享了同一个 Symbol 值，方便在不同模块之间进行通信和数据共享。

那么，在实际项目开发中，Symbol.for()和Symbol()在哪些场景中使用

在实际项目开发中，Symbol.for()和Symbol()有着不同的适用场景，下面分别为你详细介绍。

Symbol()的使用场景

1. 避免对象属性名冲突

在大型项目里，代码可能会被多个开发者编写或者引入多个第三方库，不同的代码部分可能会给对象添加相同的属性名，从而产生冲突。使用Symbol()创建的属性名是独一无二的，能够避免这种冲突。

// 创建一个Symbol作为属性名
const uniqueKey = Symbol('特殊属性');
const myObject = {};
// 使用Symbol作为对象的属性名
myObject[uniqueKey] = '特殊值';

// 其他代码可能会给对象添加相同名字的属性，但不会冲突
myObject['特殊属性'] = '普通值';

console.log(myObject[uniqueKey]); // 输出 '特殊值'
console.log(myObject['特殊属性']); // 输出 '普通值'

2. 实现对象的私有属性和方法

在 JavaScript 里，并没有像其他编程语言那样原生支持私有属性和方法，但可以借助Symbol()来模拟实现。由于Symbol()创建的Symbol值是独一无二的，外部无法直接访问，从而实现了一定程度的私有性。

const privateMethod = Symbol('私有方法');

class MyClass {
    constructor() {
        // 定义私有方法
        this[privateMethod] = function() {
            console.log('这是一个私有方法');
        };
    }

    publicMethod() {
        // 内部可以调用私有方法
        this[privateMethod]();
    }
}

const instance = new MyClass();
// 外部无法直接访问私有方法
// instance[privateMethod](); // 报错，privateMethod未定义
instance.publicMethod(); // 正常调用，输出 '这是一个私有方法'

3. 作为常量枚举

在项目中，有时需要定义一组常量来表示不同的状态或者选项。使用Symbol()可以确保每个常量都是独一无二的，避免意外的相等比较。

const COLORS = {
    RED: Symbol('红色'),
    GREEN: Symbol('绿色'),
    BLUE: Symbol('蓝色')
};

function getColorName(color) {
    switch (color) {
        case COLORS.RED:
            return '红色';
        case COLORS.GREEN:
            return '绿色';
        case COLORS.BLUE:
            return '蓝色';
        default:
            return '未知颜色';
    }
}

const selectedColor = COLORS.RED;
console.log(getColorName(selectedColor)); // 输出 '红色'

Symbol.for()的使用场景

1. 跨模块共享Symbol值

在大型项目中，代码通常会被拆分成多个模块。如果需要在不同的模块之间共享同一个Symbol值，就可以使用Symbol.for()。这样，不同模块可以通过相同的"键"来获取同一个Symbol值。

// 模块 A
const sharedSymbol = Symbol.for('共享键');
// 模块 B
const sameSharedSymbol = Symbol.for('共享键');

// 比较两个Symbol值，它们是相等的
console.log(sharedSymbol === sameSharedSymbol); // 输出 true

2. 插件系统和扩展机制

在插件系统或者扩展机制中，不同的插件或者扩展可能需要通过一个全局唯一的标识来进行通信或者协作。使用Symbol.for()可以创建这样的全局唯一标识，方便不同插件之间进行交互。

// 主应用
const pluginHook = Symbol.for('插件钩子');

class MainApp {
    constructor() {
        this[pluginHook] = [];
    }

    registerPlugin(plugin) {
        this[pluginHook].push(plugin);
    }

    runPlugins() {
        this[pluginHook].forEach(plugin => plugin());
    }
}

// 插件
const plugin = Symbol.for('插件钩子');
function myPlugin() {
    console.log('插件执行');
}

const app = new MainApp();
app.registerPlugin(myPlugin);
app.runPlugins(); // 输出 '插件执行'

3. 全局状态管理

在一些全局状态管理的场景中，需要确保不同的组件或者模块能够访问和修改同一个全局状态。使用Symbol.for()可以创建全局唯一的Symbol值作为状态的标识，方便不同部分的代码进行状态的读写操作。

// 全局状态管理模块
const globalStateKey = Symbol.for('全局状态');
const globalState = {};

function getGlobalState() {
    return globalState[globalStateKey];
}

function setGlobalState(value) {
    globalState[globalStateKey] = value;
}

// 其他模块
setGlobalState('新的全局状态');
console.log(getGlobalState()); // 输出 '新的全局状态'

综上所述，Symbol()适合在局部作用域内创建独一无二的值，而Symbol.for()适合在需要全局共享Symbol值的场景中使用。在实际开发中，要根据具体的需求来选择合适的方法。

5. 总结

在 JavaScript 中，Symbol() 和 Symbol.for() 都是创建 Symbol 值的方法，但它们的用途和特性有所不同。Symbol() 适合创建局部唯一的 Symbol 值，而 Symbol.for() 适合创建全局唯一的 Symbol 值。在实际开发中，我们要根据具体的需求来选择合适的方法，这样才能充分发挥 Symbol 类型的优势，让我们的代码更加健壮和高效。

希望通过这篇文章，你对 Symbol() 和 Symbol.for() 的区别有了更清晰的认识，在以后的前端开发中能够灵活运用它们。如果你还有其他关于 JavaScript 或者前端开发的问题，欢迎在评论区留言讨论！