JS `Class Fields` (ES2022)：私有字段 `#` 与公共字段的声明

各位观众老爷，晚上好！我是你们的老朋友，今天咱们不聊八卦，只谈技术，来聊聊 JavaScript ES2022 引入的 Class Fields，特别是私有字段 # 和公共字段的声明。准备好了吗？咱们这就开始！

第一幕：Class Fields 的前世今生

在 ES2022 之前，JavaScript 类中的字段声明方式一直有些“野路子”。我们通常是在构造函数 constructor 里面用 this 来定义和初始化字段。这种方式虽然简单粗暴，但也带来了一些问题：

可读性差： 字段的定义和初始化分散在构造函数中，代码多了之后，很难一眼看出类有哪些字段。
类型安全问题： JavaScript 本身是弱类型语言，字段的类型完全依赖于你赋的值，很容易出现类型错误。
私有性缺失： JavaScript 之前的私有属性实现方式（例如使用约定俗成的下划线 _ 前缀）实际上是“假的私有”，仍然可以从外部访问和修改。

为了解决这些问题，ES2022 引入了 Class Fields，它允许我们在类的主体中直接声明字段，并且提供了真正的私有字段支持。这就像给 JavaScript 的类穿上了一件更加规范和严谨的衣服。

第二幕：公共字段的声明与使用

公共字段的声明非常简单，直接在类的主体中写上字段名即可，可以同时进行初始化：

class Person {
  name = '张三';
  age = 30;

  constructor() {
    // 可以访问和修改公共字段
    this.name = '李四';
    console.log(this.age); // 输出 30
  }

  greet() {
    console.log(`你好，我是${this.name}，今年${this.age}岁。`);
  }
}

const person = new Person();
person.greet(); // 输出：你好，我是李四，今年30岁。
console.log(person.name); // 输出：李四

上面的代码中，name 和 age 就是公共字段，它们可以在类的内部和外部被访问和修改。

公共字段的特点：

声明位置： 直接在类的主体中声明，与方法同级。
访问权限： 可以在类的内部和外部被访问和修改。
初始化： 可以在声明时直接初始化，也可以在构造函数中初始化。
语法简洁： 比起在构造函数中定义字段，更加简洁明了。

公共字段的初始化方式：

初始化位置	代码示例	说明
声明时初始化	`name = '张三';`	在声明字段的同时赋予初始值。这是最常见的初始化方式。
构造函数中初始化	`constructor() { this.age = 30; }`	在构造函数中根据不同的条件赋予初始值。这种方式适用于需要根据传入参数或其他条件来确定初始值的情况。
方法中初始化	`setAge(age) { this.age = age; }`	在其他方法中修改字段的值。这种方式适用于需要在对象创建后动态修改字段值的情况。
无初始化	`name;`	如果没有显式初始化，公共字段的默认值为 `undefined`。

第三幕：私有字段的声明与使用

重头戏来了！ES2022 引入的私有字段使用 # 前缀来声明，这才是真正的私有，外部无法直接访问。

class BankAccount {
  #balance = 0; // 私有字段

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  deposit(amount) {
    if (amount > 0) {
      this.#balance += amount;
    }
  }

  withdraw(amount) {
    if (amount > 0 && amount <= this.#balance) {
      this.#balance -= amount;
    }
  }

  getBalance() {
    return this.#balance; // 只能在类内部访问
  }
}

const account = new BankAccount(100);
account.deposit(50);
account.withdraw(20);
console.log(account.getBalance()); // 输出 130
//console.log(account.#balance); // 报错：Private field '#balance' must be declared in an enclosing class

上面的代码中，#balance 就是一个私有字段，只能在 BankAccount 类内部访问，外部直接访问会报错。

私有字段的特点：

声明位置： 同样是在类的主体中声明，与方法同级。
访问权限： 只能在类的内部访问，外部无法直接访问。
前缀： 必须使用 # 前缀来声明。
真正私有： 与之前的下划线 _ 前缀不同，# 前缀的私有字段是真正的私有，无法通过任何方式在外部访问和修改。

私有字段的用途：

封装内部状态： 将一些敏感的数据或逻辑封装在类内部，防止外部直接修改，保证对象的完整性。
隐藏实现细节： 隐藏类的内部实现细节，只暴露必要的公共接口，降低类的复杂性，提高代码的可维护性。
防止意外修改： 防止外部代码意外修改类的内部状态，提高代码的健壮性。

私有字段的注意事项：

必须声明： 私有字段必须在类的主体中声明，不能在构造函数或方法中动态添加。
作用域： 私有字段的作用域仅限于声明它的类。
命名冲突： 私有字段不能与公共字段或方法重名，否则会报错。
继承： 子类无法访问父类的私有字段。

第四幕：公共字段 vs 私有字段：一场巅峰对决

为了更清晰地了解公共字段和私有字段的区别，我们用一个表格来总结一下：

特性	公共字段	私有字段
声明方式	`fieldName = value;`	`#fieldName = value;`
访问权限	类内部和外部都可以访问	只能在类内部访问，外部无法直接访问
作用域	类内部和外部	类内部
用途	暴露类的公共属性和状态	封装类的内部状态和实现细节
适用场景	需要对外公开的属性和状态	不需要对外公开，只在类内部使用的属性和状态
继承	子类可以访问和修改	子类无法访问
命名冲突	可以与方法重名，但容易引起混淆	不能与公共字段或方法重名

第五幕：高级用法：静态字段和静态私有字段

除了实例字段，ES2022 还支持静态字段和静态私有字段。静态字段属于类本身，而不是类的实例。

class MyClass {
  static publicStaticField = '公共静态字段';
  static #privateStaticField = '私有静态字段';

  static getPrivateStaticField() {
    return MyClass.#privateStaticField;
  }
}

console.log(MyClass.publicStaticField); // 输出：公共静态字段
console.log(MyClass.getPrivateStaticField()); // 输出：私有静态字段
//console.log(MyClass.#privateStaticField); // 报错：Private field '#privateStaticField' must be declared in an enclosing class

静态字段的特点：

声明方式： 使用 static 关键字声明。
访问方式： 通过类名直接访问，例如 MyClass.publicStaticField。
用途： 用于存储与类相关的常量、配置信息或工具函数。

静态私有字段的特点：

声明方式： 使用 static 和 # 关键字声明。
访问方式： 只能在类的静态方法或静态块中访问。
用途： 用于封装类的内部静态状态和实现细节。

静态块（Static Initialization Blocks）：

ES2022 还引入了静态块，它允许我们在类加载时执行一些静态初始化操作。

class MyClass {
  static publicStaticField;

  static {
    // 在静态块中进行初始化
    MyClass.publicStaticField = '初始化后的公共静态字段';
    console.log('静态块执行了');
  }
}

console.log(MyClass.publicStaticField); // 输出：初始化后的公共静态字段

静态块的特点：

声明方式： 使用 static { ... } 语法声明。
执行时机： 在类加载时执行，只执行一次。
用途： 用于执行一些静态初始化操作，例如初始化静态字段、注册事件监听器等。

第六幕：Class Fields 的兼容性与最佳实践

虽然 Class Fields 已经成为了 JavaScript 的标准，但仍然需要考虑兼容性问题。

兼容性：

浏览器： 大部分现代浏览器已经支持 Class Fields，但一些老旧浏览器可能不支持。
Node.js： Node.js v16 及以上版本支持 Class Fields。
构建工具： 可以使用 Babel 等构建工具将 Class Fields 转换为 ES5 代码，以兼容老旧浏览器。

最佳实践：

合理使用公共字段和私有字段： 根据实际需求选择合适的字段类型，尽量将不需要对外暴露的属性和状态声明为私有字段。
使用清晰的命名规范： 为公共字段和私有字段选择清晰的命名规范，提高代码的可读性。
避免过度使用私有字段： 过度使用私有字段可能会导致类的接口过于僵化，降低代码的灵活性。
使用静态字段存储常量和配置信息： 将与类相关的常量和配置信息存储在静态字段中，方便访问和管理。
使用静态块进行静态初始化： 使用静态块执行静态初始化操作，提高代码的可读性和可维护性。

第七幕：总结与展望

ES2022 引入的 Class Fields 极大地改善了 JavaScript 类的定义方式，提供了更加规范、严谨和安全的编码体验。私有字段的引入，更是解决了 JavaScript 长期以来私有性缺失的问题。

公共字段： 用于暴露类的公共属性和状态。
私有字段： 用于封装类的内部状态和实现细节。
静态字段： 用于存储与类相关的常量、配置信息或工具函数。
静态块： 用于执行静态初始化操作。

虽然 Class Fields 已经很强大了，但 JavaScript 的发展永无止境。未来，我们可能会看到更多关于类的增强功能，例如更强大的类型系统、更灵活的访问控制机制等。

好了，今天的讲座就到这里。希望大家通过今天的学习，能够更好地理解和使用 Class Fields，写出更加高质量的 JavaScript 代码。下次有机会再见！

发表回复 取消回复

发表回复取消回复