ES11 中的 class 的私有字段介绍

在 ES11 中，我们可以使用 class 的私有字段来创建只能在类内部访问的属性。这一特性可以使得我们更加轻松地控制类的内部状态，同时也能够避免潜在的命名冲突。

定义私有字段

在 ES11 中，我们可以使用 # 符号来定义私有字段。例如：

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

上面的代码中，#name 就是一个私有字段。它只能在类内部访问，外部无法访问。

访问私有字段

在类内部，我们可以直接访问私有字段。例如：

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

上面的代码中，getName 和 setName 方法都可以访问私有字段 #name。

在类外部，我们无法直接访问私有字段。例如：

const person = new Person('Alice');
console.log(person.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

上面的代码中，我们试图在类外部访问私有字段 #name，结果会抛出一个语法错误。

私有字段的作用

私有字段的作用之一是避免命名冲突。例如：

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

class Student extends Person {
  #name;
  constructor(name, grade) {
    super(name);
    this.#name = `${name} (${grade})`;
  }
  getName() {
    return this.#name;
  }
}

上面的代码中，Person 类和 Student 类都有一个 #name 私有字段。由于它们是私有的，因此它们之间不会发生命名冲突。

另一个作用是控制类的内部状态。例如：

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

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

上面的代码中，#count 是一个私有字段，它只能在类内部访问。由于外部无法访问它，因此我们可以更加轻松地控制计数器的内部状态。

总结

ES11 中的 class 的私有字段是一个非常有用的特性。它可以使得我们更加轻松地控制类的内部状态，同时也能够避免潜在的命名冲突。在实际开发中，我们可以根据需要使用私有字段来设计更加健壮的类。

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