在 ECMAScript 2021 中，我们看到了一个新的特性——Private Fields，它解决了 JavaScript 中的一些问题，使得我们可以更加方便地编写高质量的代码。在本文中，我们将探讨 Private Fields 的背景和解决方案，以及如何使用它来改善我们的代码。
背景
在 JavaScript 中，我们经常需要封装对象的属性，以避免对它们的直接访问。这可以通过使用闭包或将属性命名为以下划线开头的约定来实现。例如：
// www.javascriptcn.com code example
class Person {
constructor(name, age) {
this._name = name;
this._age = age;
}
get name() {
return this._name;
}
set name(name) {
this._name = name;
}
get age() {
return this._age;
}
set age(age) {
this._age = age;
}
}
const person = new Person("Alice", 25);
console.log(person.name); // "Alice"
person.name = "Bob";
console.log(person.name); // "Bob"在这个例子中，我们使用了一个约定，将 _name 和 _age 命名为私有属性，并使用 getter 和 setter 方法来访问它们。但是，这个约定并不是强制性的，因此其他开发人员可以轻易地绕过这个约定，直接访问这些属性。这可能会导致代码逻辑错误和维护问题。
解决方案
为了解决这个问题，ECMAScript 2021 引入了 Private Fields。使用 Private Fields，我们可以将属性标记为私有，只能在类内部访问。这样，其他开发人员就无法直接访问这些属性，从而提高了代码的安全性和可维护性。
要声明 Private Fields，我们可以在属性名称前加上 #。例如：
// www.javascriptcn.com code example
class Person {
#name;
#age;
constructor(name, age) {
this.#name = name;
this.#age = age;
}
get name() {
return this.#name;
}
set name(name) {
this.#name = name;
}
get age() {
return this.#age;
}
set age(age) {
this.#age = age;
}
}
const person = new Person("Alice", 25);
console.log(person.name); // "Alice"
person.name = "Bob";
console.log(person.name); // "Bob"
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class在这个例子中，我们使用了 #name 和 #age 来声明两个私有属性。我们可以在构造函数中初始化这些属性，并使用 getter 和 setter 方法来访问它们。注意，在类外部访问这些属性会导致语法错误。
学习和指导意义
Private Fields 是一个强大的工具，可以帮助我们更好地封装对象，并提高代码的可维护性和安全性。使用 Private Fields，我们可以：
- 避免约定的错误。Private Fields 是一个强制性的机制，可以防止其他开发人员绕过约定，直接访问私有属性。
- 避免属性名称冲突。由于 Private Fields 的名称前缀是
#，它们不会与其他属性名称冲突。 - 提高代码的可读性。Private Fields 的名称前缀是
#，可以很容易地识别私有属性。 - 简化代码。使用 Private Fields，我们可以省略 getter 和 setter 方法的定义，从而简化代码。
需要注意的是，Private Fields 目前还不是所有浏览器都支持的特性。如果您的代码需要在旧版本的浏览器中运行，您需要使用转译器（如 Babel）将代码转换为旧版 JavaScript。
示例代码
下面是一个使用 Private Fields 的示例代码：
// www.javascriptcn.com code example
class Rectangle {
#width;
#height;
constructor(width, height) {
this.#width = width;
this.#height = height;
}
get area() {
return this.#width * this.#height;
}
set width(width) {
this.#width = width;
}
set height(height) {
this.#height = height;
}
}
const rectangle = new Rectangle(10, 20);
console.log(rectangle.area); // 200
rectangle.width = 5;
console.log(rectangle.area); // 100
console.log(rectangle.#width); // SyntaxError: Private field '#width' must be declared in an enclosing class在这个例子中，我们使用了 Private Fields 来声明 #width 和 #height 属性，并使用 getter 方法计算矩形的面积。我们可以使用 setter 方法来修改矩形的宽度和高度。注意，在类外部访问 #width 属性会导致语法错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d96d62a941bf713410c1f5