ECMAScript 2021 (ES12) 中的 class body 中的私有字段及其应用-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2021 (ES12) 中，引入了 class body 中的私有字段，这是一个非常重要的特性，因为它能够有效地提高代码的封装性和可读性。在本篇文章中，我们将深入探讨私有字段的概念、语法和应用，以及如何在实际项目中使用它们。

什么是私有字段？

在 JavaScript 中，我们经常需要将一些属性或方法私有化，以避免其被外部访问和修改，以免引起不必要的错误。在 ES6 之前，我们通常要用闭包或模块模式等方式模拟私有属性和方法，这样虽然能够达到我们的目的，但是它相对麻烦且不太直观，也容易出现在子类中被修改的问题。

在 ES6 中，引入了 class 语法，为我们提供了一种更加优雅和面向对象的编程方式，但是它并没有提供实现真正意义上的私有属性和方法的机制。直到 ES12 中，加入了私有字段的概念和语法，这是一种新的方式来声明不可直接访问和修改的属性和方法，而它们仅被限定在类内部范围。

如何定义私有字段？

在 ES12 中，定义私有字段需要用到 # 符号，表示这个字段是私有的，而且它只能在类内部可以被访问和修改，外部无法访问。

class Person {
  #name = '';
  
  constructor(name) {
    this.#name = name;
  }
}

在上面的代码中，我们使用了 #name 来定义一个私有属性，这个属性只能在 Person 类内部被访问和修改，外部无法直接访问或修改。

如何使用私有字段？

我们在类内部可以通过 this.#name 的方式来访问和修改私有属性，而在类的外部，则无法访问和修改私有属性，以下代码是一个使用了私有属性的示例：

// javascriptcn.com 代码示例
class Person {
  #name = '';
  
  constructor(name) {
    this.#name = name;
  }
  
  sayName() {
    console.log(`My name is ${this.#name}`);
  }
}

const p = new Person('Tom');
p.#name = 'Jack'; // Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class
p.sayName(); // Output: My name is Tom

在上面的代码中，我们使用了私有属性 #name 和公有方法 sayName()，而在类外部，我们尝试修改私有属性 #name，但却得到了 Uncaught SyntaxError: Private field '#name' must be declared in an enclosing class 的错误，这说明私有属性 #name 是无法被访问和修改的。而在类内部，则可以正常地使用 this.#name 来访问和修改私有属性。

私有字段的应用场景

私有字段的引入给我们提供了更好的实现封装和隐藏的方式，这对于类的设计和维护来说非常重要和实用，以下是私有字段的一些应用场景：

封装数据

在面向对象编程中，我们通常需要封装数据，在内部实现一些计算和处理逻辑，而将数据对外隐藏和保护。私有字段可以非常方便地实现这种数据的封装和隐藏，同时也可以避免外部误操作而产生不必要的错误。

// javascriptcn.com 代码示例
class Counter {
  #count = 0;
  
  getCount() {
    return this.#count;
  }
  
  increment() {
    this.#count++;
  }
  
  decrement() {
    this.#count--;
  }
}

const counter = new Counter();
console.log(counter.getCount()); // Output: 0
counter.increment();
counter.increment();
console.log(counter.getCount()); // Output: 2
counter.decrement();
console.log(counter.getCount()); // Output: 1

在上面的代码中，我们使用私有属性 #count 封装了计数器的数据，而对外提供了不可修改的 getCount() 方法和修改计数器值的 increment() 和 decrement() 方法。这样，在类外部我们就无法直接访问和修改计数器的数据，而只能使用类提供的方法来进行操作。

防止属性重名和覆盖

在以往的版本中，我们通常使用 _ 等方式来表示私有属性，但这种方式并不是真正意义上的私有属性，它在命名上仍然存在一定的问题，容易与其他属性重名或者被子类覆盖。而私有属性 # 符号则能够很好地解决这些问题，它确保了所有使用了 # 符号定义的属性都是私有属性，避免了重名或者覆盖的问题。

// javascriptcn.com 代码示例
class Person {
  #name = '';
  
  constructor(name) {
    this.#name = name;
  }
  
  getName() {
    return this.#name;
  }
  
  setName(name) {
    this.#name = name;
  }
}

class Student extends Person {
  #grade = '';
  
  constructor(name, grade) {
    super(name);
    this.#grade = grade;
  }
  
  getGrade() {
    return this.#grade;
  }
  
  setGrade(grade) {
    this.#grade = grade;
  }
}

在上面的代码中，我们使用了私有属性 #name 和 #grade，分别表示 Person 和 Student 的私有属性，外部无法直接访问和修改。而在子类中定义的私有属性 #grade，不会影响父类的 #name，避免了命名冲突和覆盖的问题。

在继承中起到作用

私有属性不会被继承到子类中，这可以避免父类的私有属性被子类误操作或者修改，保证了类的封装性和隔离性。同时，私有方法和属性的定义和使用方式能够更加清晰和优雅，使得类的设计和维护更加方便和高效。

总结

私有字段是 ES12 中一个非常重要和实用的特性，它在对象封装、数据隐藏以及类继承等方面都有着重要的应用。在实际项目中，我们可以使用私有字段来封装数据、避免属性重名、防止属性被覆盖、增强类的封装性和隔离性等。因此，在学习和使用 JavaScript 时，我们应该充分了解和掌握私有字段的语法和应用，使得代码更加健壮、可读和易维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b4ee67d4982a6ebd4788d