ECMAScript 2021 中的 Private Fields-JavaScript中文网-JavaScript教程资源分享门户

前端开发爱好者们都知道，在 JavaScript 中有许多数据类型，常常会使用对象来存储数据信息。要访问对象的属性，我们通常会使用 “.” 来获取属性值。但是，在一些场景下，我们不希望用户或其他开发人员随意地获取或修改对象中的属性值。因此，ES 2021 中新增了“私有属性字段”（Private Fields）的概念和实现，以解决这一问题。

Private Fields 的定义

ECMAScript 2021 中的 Private Fields 是指存在于类实例内部的一类属性。它们无法从类实例之外访问，并且在类内部只能够访问到自己的私有字段。私有字段由 "#" 符号加上私有字段名称来表示，例如：

// www.javascriptcn.com code example
class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

例子中，我们定义了一个 Person 类，并在其中添加了一个私有属性字段 #name。实际上，这里 #name 与常规的类属性定义方式并没有太大区别，只是在名称前添加了一个 "#" 符号。通过这种方式，我们就可以将 #name 定义为这个对象的私有属性，从而保护这个属性的访问权限。

Private Fields 的访问

我们已经定义了类的私有属性，下面我们来看看如何访问它们。

类内部访问

在类内部，私有字段与其他属性一样，可以被该类中的方法所访问，例如 getName() 方法：

// www.javascriptcn.com code example
class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

getName() 方法可以在 this.#name 的前面直接使用私有字段。这是因为在类内部，只要使用了私有属性字段的名称，就相当于直接使用该属性，能直接访问到私有属性字段。

类外部访问

在类外部，私有字段无法通过常规的属性访问方式获取。因此，我们使用 get 或 set 方法从类的内部来获取私有属性值，例如：

// www.javascriptcn.com code example
class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }

  get name() {
    return this.#name;
  }

  set name(newName) {
    this.#name = newName;
  }
}

const me = new Person("Tom");
console.log(me.getName()); // Output: Tom
console.log(me.name); // Output: Tom
me.name = "Jerry";
console.log(me.getName()); // Output: Jerry

在类外部，我们可以使用 get 或 set 方法来读取或设置私有属性字段 #name。

Private Fields 的使用场景

随着前端开发的发展，代码量不断增加，开发人员更希望使用面向对象思路进行编程，来实现更好的代码复用性和可维护性。ECMAScript 2021 中的私有属性字段（Private Fields）提供了一种更好的数据隐藏方式，以保护已经封装的对象内部状态。私有属性的访问方式也更为简洁明了，可读性更高。

举个例子，假设我们有一个计算器类（Calculator），其中拥有一个值（value）属性，我们只允许从外部调用它的加（add）和减（subtract）方法来改变这个值：

// www.javascriptcn.com code example
class Calculator {
  #value;

  constructor(value) {
    this.#value = value;
  }

  add(value) {
    this.#value += value;
  }

  subtract(value) {
    this.#value -= value;
  }
}

const calculator = new Calculator(10);
calculator.add(5);
calculator.subtract(3);
console.log(calculator.#value); // Error

在上述例子中，我们将 #value 属性定义为私有属性，仅允许从 add 和 subtract 方法改变它的值。在实例化之后，我们无法通过常规的方式获取 #value 的值，从而保护了计算器类的内部状态。

Conclusion

ECMAScript 2021 中的 Private Fields 提供了一种更好的数据隐藏方式，以保护已经封装的对象内部状态。私有属性的访问方式也更为简洁明了，可读性更高。通过私有属性字段，我们可以封装类的内部状态，只暴露接口和方法，以提高代码的可维护性和可复用性。如果你是一个开发者，那么这一特性应该会对你的开发有很大的指导意义，让你的代码更加安全、可维护、可读。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d62c48a941bf7134bd8461

ECMAScript 2021 中的 Private Fields