JavaScript 中，对于类的私有属性的访问和修改，一直是一个存在争议的问题。在 ECMAScript 2021 中，新增了 private field 的概念，解决了这一问题。本文将详细讲解 private field 的概念，以及如何在实际开发中使用它，提高代码封装性。
什么是 private field
在 JavaScript 中，类的属性默认是公开的（public），可以被任何地方访问和修改。在实际开发中，这样的属性可能会造成不必要的问题，比如属性名与其他库或模块发生冲突，或者属性值被误修改等问题。为了解决这些问题，JavaScript 引入了 private field。
所谓 private field，就是一个类的私有属性，只能在类内部访问和修改，外部无法访问到。
在 ECMAScript 2021 中，使用 # 符号声明 private field。示例代码如下：
// javascriptcn.com 代码示例
class Person {
#name;
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
}上述代码中，#name 就是一个 private field。通过 constructor 函数进行初始化，然后在 getName 函数中访问。
使用 private field 的优势
使用 private field，可以使代码更加安全、可维护、可读性更好。
安全性
由于 private field 只能在类内部访问和修改，外部无法访问到，因此可以避免属性被误修改，提高代码安全性。
可维护性
通过使用 private field，可以隐藏类的实现细节，使代码更加简洁，便于维护。如果类的实现需要更改，不需要考虑外部代码对属性的影响。
可读性
通过使用 private field，可以避免属性名与其他库或模块发生冲突，便于代码阅读，提高代码可读性。
如何在实际开发中使用 private field
在实际开发中使用 private field，需要注意以下几点：
1. 私有属性只能在类的内部访问和修改
使用 private field 声明的属性只能在类的内部访问和修改，外部无法访问到。
2. 私有属性名以 # 开头
使用 private field 声明的属性名必须以 # 开头，否则会引起语法错误。
3. 私有属性与公开属性不能同名
使用 private field 声明的属性名不能与公开属性名相同，否则会引起语法错误。
4. 私有属性不会被继承
使用 private field 声明的属性不会被子类继承，必须在子类中重新声明。
5. 私有属性可以与 get/set 方法一起使用
使用 private field 声明的属性可以与 get/set 方法一起使用，提供更加灵活的属性访问方式。
示例代码
下面是一个使用 private field 的示例代码，用于演示 private field 的使用方法。
// javascriptcn.com 代码示例
class Person {
#name;
constructor(name) {
this.#name = name;
}
getName() {
return this.#name;
}
setName(name) {
this.#name = name;
}
}
const person = new Person('Tom');
console.log(person.getName()); // Tom
person.setName('Jerry');
console.log(person.getName()); // Jerry
console.log(person.#name); // SyntaxError: private field '#name' must be declared in an enclosing class上述代码定义了一个 Person 类，其中使用 private field 声明了 #name 属性，并提供了 getName 和 setName 方法对 #name 属性进行访问和修改。
最后，尝试通过外部访问 #name 属性，会触发语法错误。
总结
private field 是 ECMAScript 2021 中新增的一项功能，用于解决 JavaScript 中类的封装问题。使用 private field，可以使代码更加安全、可维护、可读性更好。在实际开发中，需要注意私有属性只能在类的内部访问和修改，私有属性名以 # 开头，私有属性与公开属性不能同名，私有属性不会被继承等细节问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652abecc7d4982a6ebcfb82f