ES 私有字段演示 - # 语法与封装

使用教程

本教程将详细介绍如何使用 ES 私有字段演示工具的各个功能模块，帮助您快速上手并高效学习 JavaScript 私有字段语法。

第一步：选择预设场景

打开工具后，您会在页面顶部看到场景选择器。点击下拉菜单，可以选择以下五个预设场景之一：

1. BankAccount（银行账户）：这是最基础的入门场景。类定义展示了如何使用 #balance 私有字段来保护账户余额，防止外部直接篡改。建议从这个场景开始学习。
2. UserAuth（用户认证）：这个场景展示了私有字段在安全敏感场景中的应用。密码通过 #password 私有字段存储，只能通过验证方法进行访问。
3. PrivateMethods（私有方法）：除了私有字段，ES2022 还引入了私有方法。这个场景展示了 #validate() 等私有方法与私有字段的协同工作方式。
4. StaticPrivate（静态私有字段）：静态私有字段在类的所有实例间共享，但对外部代码完全不可见。这个场景展示了单例模式和实例计数器的实现。
5. in-operator（in 操作符）：这个场景专门展示 #field in object 语法的用法，用于在类外部安全地检查对象是否拥有某个私有字段。

第二步：阅读和编辑代码

选择场景后，代码编辑器会显示该场景的类定义代码。代码采用了语法高亮显示，私有字段（以 # 开头的字段名）会被特别标记。您可以：

• 阅读现有代码：仔细阅读类的结构，理解每个字段和方法的作用。注意 # 前缀的字段都是私有的。
• 修改字段定义：尝试修改私有字段的初始值，观察运行结果的变化。
• 添加新字段：在类定义中添加新的私有字段或方法，测试其行为是否符合预期。
• 修改方法逻辑：修改公有方法中的逻辑，观察私有字段在不同操作下的状态变化。

编辑完成后，点击"运行"按钮或使用快捷键来执行更新后的代码。

第三步：使用测试控制台

测试控制台是本工具的核心交互区域。在控制台中，您可以输入 JavaScript 表达式来测试当前类实例的行为。以下是常用测试命令：

// 创建类实例
const account = new BankAccount(1000);

// 测试公有字段访问
account.name;                    // 应返回公有字段值

// 测试私有字段直接访问（会报错）
account.#balance;               // TypeError: Cannot access private field

// 测试方法访问
account.getBalance();           // 通过公有方法获取私有字段值

// 测试括号访问
account['#balance'];            // undefined（不是有效的私有访问）

// 测试 Object.keys()
Object.keys(account);           // 只包含公有属性

// 测试 in 操作符
#balance in account;            // true（在类定义中使用）

第四步：自定义字段名测试

如果您想要测试自定义的字段名，可以在工具提供的输入框中输入字段名（不需要 # 前缀）。工具会自动为您创建一个包含该字段的测试类，并生成相应的测试代码。

这个功能特别适合验证以下场景：

• 以单个下划线开头的字段（如 _private）是否真的私有
• 以双下划线开头的字段（如 __private）的行为
• 使用 # 前缀和不使用前缀的字段对比
• 空字符串或特殊字符作为字段名的处理

常见问题与注意事项

• 浏览器兼容性：请确保您使用的是支持私有字段的现代浏览器（Chrome 91+、Firefox 90+、Safari 15+、Edge 91+）。
• 类定义语法：私有字段只能在类的顶层定义中声明（如 #field = value;），不能通过赋值操作动态创建。
• 子类访问：私有字段在子类中不可访问，即使是同一个类定义中创建的实例也不行。
• 序列化影响：私有字段不会被 JSON.stringify() 序列化，也不会出现在 Object.keys() 的结果中。