JS 私有字段 (`#`) (ES2022)：真正的类内部私有属性

各位观众，欢迎来到今天的“ES2022 私有字段深度剖析”讲座。我是今天的讲师，咱们今天聊聊 JavaScript ES2022 引入的“真·私有”字段，也就是用 # 开头的那些家伙。

先说点心里话，JavaScript 的“私有”历史，那真是一部血泪史。从最开始的命名约定，到闭包模拟，再到 WeakMap 曲线救国，都只能说是“君子协定”，或者“障眼法”。但现在，ES2022 带来的 # 字段，终于给了我们一个真正意义上的类内部私有属性。

一、JavaScript 私有属性的“前世今生”

咱们先来回顾一下 JavaScript 为了实现“私有”这个概念，都做了哪些挣扎。

1.1 命名约定：下划线 _ 的无奈

这是最古老，也是最弱鸡的一种方式。

class MyClass {
  constructor() {
    this._privateField = "I'm supposed to be private, but I'm not!";
  }

  getPrivateField() {
    return this._privateField; // 仍然可以访问
  }
}

const myInstance = new MyClass();
console.log(myInstance._privateField); // 轻松访问，毫无隐私可言

约定俗成地用 _ 开头表示“这是私有的，请不要直接访问”。但问题是，这仅仅是个约定，JavaScript 引擎根本不会阻止你访问它。这就像在房间门口挂个牌子写着“请勿打扰”，但实际上门根本没锁。

1.2 闭包：稍微靠谱一点的方案

利用闭包的特性，把变量包裹在函数作用域内，外部就无法直接访问了。

function MyClass() {
  let privateField = "I'm private inside a closure!";

  this.getPrivateField = function() {
    return privateField;
  };
}

const myInstance = new MyClass();
console.log(myInstance.privateField); // undefined
console.log(myInstance.getPrivateField()); // "I'm private inside a closure!"

这种方式比下划线靠谱多了，至少直接访问 myInstance.privateField 是拿不到值的。但是，这种方式也有几个缺点：

• 性能问题： 每次创建实例，都会创建一个新的闭包，会占用额外的内存。
• 无法继承： 子类无法访问父类的私有变量。这对于面向对象编程来说是个很大的限制。
• this 指向问题： 在某些情况下，需要小心 this 的指向，容易出错。

1.3 WeakMap：曲线救国，但仍然不够完美

WeakMap 允许我们将对象作为键，存储一些数据。我们可以利用这个特性，把实例作为键，把私有变量存储在 WeakMap 中。

const privateData = new WeakMap();

class MyClass {
  constructor() {
    privateData.set(this, {
      privateField: "I'm private inside a WeakMap!"
    });
  }

  getPrivateField() {
    return privateData.get(this).privateField;
  }
}

const myInstance = new MyClass();
console.log(myInstance.privateField); // undefined
console.log(myInstance.getPrivateField()); // "I'm private inside a WeakMap!"

// 外部无法直接访问 WeakMap 中的数据

WeakMap 这种方式解决了闭包的内存泄漏问题，也比闭包更灵活一些。但是，它仍然有一些缺点：

• 代码复杂： 代码量明显增加，可读性下降。
• 不是真正的私有： 虽然外部无法直接访问 WeakMap，但如果有人能拿到 WeakMap 的引用，仍然可以访问私有变量。
• 调试困难： 在调试器中很难看到 WeakMap 里的内容。

二、# 字段：真正的类内部私有属性

ES2022 终于带来了 # 字段，这才是真正的类内部私有属性！

2.1 语法

class MyClass {
  #privateField = "I'm truly private!";

  getPrivateField() {
    return this.#privateField;
  }
}

const myInstance = new MyClass();
console.log(myInstance.#privateField); // 报错：私有字段 '#privateField' 必须在封闭类中声明
console.log(myInstance.getPrivateField()); // "I'm truly private!"

可以看到，# 字段只能在类内部访问，外部访问会直接报错。这才是真正的私有！

2.2 特点

• 真正的私有： 只能在类内部访问，外部无法访问。
• 编译时检查： 如果试图在类外部访问私有字段，会在编译时报错。
• 不能通过 in 操作符检测： 无法使用 in 操作符检测对象是否包含某个私有字段。
• 不能通过 Object.keys() 或 Object.getOwnPropertyNames() 枚举： 私有字段不会被枚举。

2.3 优势

• 安全性： 提供了更强的封装性，防止外部代码意外修改或访问内部状态。
• 可维护性： 降低了代码的耦合度，方便代码的修改和维护。
• 可读性： 代码更清晰，更容易理解。

2.4 示例

class Counter {
  #count = 0;

  increment() {
    this.#count++;
  }

  decrement() {
    this.#count--;
  }

  getCount() {
    return this.#count;
  }
}

const counter = new Counter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2
// console.log(counter.#count); // 报错：私有字段 '#count' 必须在封闭类中声明

在这个例子中，#count 是一个私有字段，只能通过 increment、decrement 和 getCount 方法来访问和修改。外部代码无法直接修改计数器的值，保证了计数器的正确性。

2.5 与静态私有字段结合

# 字段也可以与 static 关键字结合，创建静态私有字段。

class MyClass {
  static #privateStaticField = "I'm a static private field!";

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

console.log(MyClass.getPrivateStaticField()); // "I'm a static private field!"
// console.log(MyClass.#privateStaticField); // 报错：私有字段 '#privateStaticField' 必须在封闭类中声明

2.6 注意事项

• 必须在类内部声明： 私有字段必须在类内部声明，不能在外部添加。
• 只能通过 this 访问： 只能通过 this 访问私有字段，不能通过其他方式访问。
• 子类无法直接访问父类的私有字段： 即使子类继承了父类，也无法直接访问父类的私有字段。

三、# 字段与继承

这是一个比较关键的点，也是很多开发者容易混淆的地方。

3.1 子类无法直接访问父类的私有字段

class Parent {
  #privateField = "I'm a private field in the parent class!";

  getParentPrivateField() {
    return this.#privateField;
  }
}

class Child extends Parent {
  getChildPrivateField() {
    // return this.#privateField; // 报错：私有字段 '#privateField' 必须在封闭类中声明
    return this.getParentPrivateField(); // 通过父类的方法访问
  }
}

const child = new Child();
console.log(child.getChildPrivateField()); // "I'm a private field in the parent class!"

子类无法直接访问父类的私有字段，即使它们同名也不行。这是 # 字段设计的一个重要原则，保证了父类的内部状态不会被子类意外修改。

3.2 同名的私有字段

父类和子类可以拥有同名的私有字段，它们是完全独立的。

class Parent {
  #privateField = "Parent's private field";

  getParentPrivateField() {
    return this.#privateField;
  }
}

class Child extends Parent {
  #privateField = "Child's private field";

  getChildPrivateField() {
    return this.#privateField;
  }

  accessParentPrivateField() {
    return super.getParentPrivateField(); // 通过 super 调用父类的方法
  }
}

const child = new Child();
console.log(child.getParentPrivateField()); // "Parent's private field"
console.log(child.getChildPrivateField()); // "Child's private field"
console.log(child.accessParentPrivateField()); // "Parent's private field"

在这个例子中，Parent 和 Child 都有一个名为 #privateField 的私有字段，但它们是完全独立的。child.getParentPrivateField() 访问的是父类的私有字段，child.getChildPrivateField() 访问的是子类的私有字段。

四、# 字段的局限性

虽然 # 字段带来了真正的私有性，但它也存在一些局限性。

4.1 无法通过 in 操作符检测

无法使用 in 操作符检测对象是否包含某个私有字段。

class MyClass {
  #privateField = "I'm private!";
}

const myInstance = new MyClass();
// console.log(#privateField in myInstance); // 报错：语法错误

4.2 无法通过 Object.keys() 或 Object.getOwnPropertyNames() 枚举

私有字段不会被 Object.keys() 或 Object.getOwnPropertyNames() 枚举。

class MyClass {
  #privateField = "I'm private!";
  publicField = "I'm public!";
}

const myInstance = new MyClass();
console.log(Object.keys(myInstance)); // ["publicField"]
console.log(Object.getOwnPropertyNames(myInstance)); // ["publicField"]

4.3 需要 Babel 转换

虽然 ES2022 已经正式发布，但并非所有浏览器都完全支持 # 字段。可能需要使用 Babel 等工具进行转换，才能在旧版本的浏览器中使用。

五、总结

我们用一个表格来总结一下 JavaScript 私有属性的演进历程：

特性	命名约定 (下划线 _)	闭包	WeakMap	# 字段 (ES2022)
私有性	弱	较强	较强	强
性能	高	低	中	高
内存泄漏	无	可能	无	无
继承	无限制	困难	较复杂	困难
代码复杂度	低	中	高	低
可读性	高	中	低	高
浏览器支持	广泛	广泛	较好	需要 Babel 转换

总的来说，# 字段是 JavaScript 私有属性发展的一个重要里程碑。它提供了真正的私有性，提高了代码的安全性、可维护性和可读性。虽然存在一些局限性，但瑕不掩瑜，# 字段仍然是编写高质量 JavaScript 代码的有力工具。

好了，今天的讲座就到这里。希望大家对 JavaScript 的私有字段有了更深入的理解。下次再见！