在 ECMAScript 2019（ES11）中，加入了私有字段（Private Fields）这个新特性，它可以让开发者在类中创建私有属性，从而提高代码的封装性和安全性。本文将详细介绍 ES11 中的私有字段的使用方法和特性，以及其对前端开发的指导意义。
什么是私有字段？
私有字段是一个只能在类内部访问的类成员，它的命名规则是以 "#" 开头的标识符。私有字段可以是常量、属性或方法。使用私有字段可以有效避免不小心修改了组件内部的状态或属性，增强了代码的可维护性和安全性。
如何使用私有字段？
ES11 中，我们可以通过在类中声明 private 标识符来创建私有字段，例如：
-- -------------------- ---- ------- ----- ------ - ------ ----------------- - ---------- - ----- - --- ------ - ------ ----------- - - ----- - - --- ------------- -------------------- -- ------- --------------------- -- ------------------ ------- ----- ------- ---- -- -------- -- -- --------- ------展开代码
在上面的代码中，我们创建了一个 Person 类，并声明了私有字段 #name。在构造函数中，我们给 #name 赋了初值，然后在 name 的 getter 中返回了 #name。
需要注意的是，在类的外部不能直接访问私有字段，否则会抛出一个 SyntaxError 错误。只能通过类中的公共接口（例如 name 的 getter ）来访问私有字段。
除了使用类中声明的私有字段，我们还可以在类中使用访问器（ Accessor ）来获取和设置私有字段的值，例如：
-- -------------------- ---- ------- ----- ------ - ------ --- ------ - ------ ----------- - --- ---------- - ---------- - ----- - - ----- - - --- --------- -------------------- -- ------------ ------ - ----- -------------------- -- -------展开代码
在上面的代码中，我们声明了一个访问器 name，它可以获取和设置私有字段 #name 的值。name 的 getter 返回了私有字段 #name 的值，而 setter 将传入的值赋给了私有字段 #name。
私有字段的特性
私有字段有以下几个特性：
优先级高于共有字段
如果一个类同时声明了一个私有字段和一个公有字段，那么在类的内部访问这个字段时，私有字段会优先被访问。
-- -------------------- ---- ------- ----- ------ - ----- - ----- ---- - ----- ----------------- - -- ------ - --------- - ----- - - --------- - ------ ----------- - - ----- - - --- ------------- ------------------------- -- -------展开代码
在上面的代码中，在 Person 类中声明了一个私有字段 #name 和一个公有字段 name。在构造函数中，如果传入了 name 参数就会将其赋值给公有字段 name。
在 getName 方法中，我们返回了私有字段 #name 的值。由于私有字段的优先级高于公有字段，因此在 getName 方法中我们访问的是私有字段。
子类不能访问父类的私有字段
私有字段不能被子类直接访问，只能在父类中调用。如果子类声明了与父类相同的私有字段，那么它们不会相互影响。
-- -------------------- ---- ------- ----- ------ - ------ ----------------- - ---------- - ----- - - ----- ------- ------- ------ - ----- - ----- ----------------- ------ - ------------ ---------- - ------ - --------- - ------ ------------ - - ----- - - --- ------------- ---- ------------------------- -- ------------------ ------- ----- ------- ---- -- -------- -- -- --------- ------展开代码
在上面的例子中，我们创建了一个 Person 类和一个 Student 类，后者继承了前者。在子类中声明了一个与父类相同的私有字段 #name，但是它们并不相互影响，也不能从子类中访问父类的私有字段。
在 getName 方法中，我们调用了父类的私有字段 #name，但却抛出了一个错误，说明私有字段不能在子类中直接访问。
私有字段的指导意义
私有字段是一个有用的特性，它可以在很多情况下提高代码的封装性和安全性，避免意外修改代码。在前端开发中，我们可以使用私有字段来避免组件或类的内部状态被外部改变。
例如，在 React 开发中，一个组件的状态是非常重要的，因为它决定了组件的渲染结果。使用私有字段可以保证组件的状态不会被外部修改，从而降低代码的出错率。
下面是一个使用私有字段的 React 组件示例：
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ------- ------- --------------- - ------ - -- ----------- - -- -- - -------------- ------------------- - -------- - ------ - ----- ------ ------------- ----- ------- -------------------------------------- ------ -- - - ------ ------- --------展开代码
在这个组件中，我们使用私有字段 #count 来保存当前的计数器值，同时在 handleClick 方法中修改它。这样，外部组件就不能直接修改计数器的值，只能通过调用组件的公共 API 来实现。
总结
ES11 的私有字段是一个非常有用的特性，它可以提高代码的封装性和安全性，避免意外修改代码。在前端开发中，我们可以使用私有字段来保护组件或类的内部状态，从而降低代码的出错率。同时，需要注意的是，私有字段不能在子类中直接访问，只能在父类中调用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64532645968c7c53b07989a3
