ES13 # 私有字段（ Private Fields） 语法：在类中定义真正的私有属性

ES2022引入的私有字段(#)语法为JavaScript类提供了真正的私有属性支持。

---

私有字段通过#前缀定义，只能在类内部访问，外部无法通过任何方式访问或修改。

---

相比传统的下划线约定、Symbol或WeakMap方案，私有字段具有更好的封装性、更简洁的语法和更优的性能。

---

私有字段支持静态字段、方法和getter/setter，但不支持动态添加或子类继承访问。

---

该特性已被主流浏览器和Node.js支持，TypeScript 3.8+也提供了兼容支持。

---

私有字段是保护类内部状态的理想选择，使JavaScript的面向对象编程更加完善。

#是ES2022 (ES13)引入的私有字段（Private Fields）语法，用于在类中定义真正的私有属性。

1. 基本语法

class MyClass { // 私有字段（使用 # 前缀） #privateField = 0; // 私有方法 #privateMethod() { return '私有方法'; } // 公共方法可以访问私有字段 publicMethod() { console.log(this.#privateField); console.log(this.#privateMethod()); } } const instance = new MyClass(); instance.publicMethod(); // ✅ 正常访问 console.log(instance.#privateField); // ❌ SyntaxError: 私有字段不能外部访问

2. 为什么需要#私有字段？

在#出现之前，JavaScript 没有真正的私有属性，通常用以下方式模拟：

// ❌ 方式1: 下划线约定（只是约定，不是真正的私有） class User { constructor(name) { this._name = name; // 约定为私有，但仍可访问 } } const user = new User('Alice'); console.log(user._name); // "Alice" - 仍然可以访问 // ❌ 方式2: 闭包（复杂且性能差） function createUser(name) { let _name = name; // 真正的私有 return { getName() { return _name; }, setName(value) { _name = value; } }; } // ✅ 方式3: 私有字段（简洁且真正私有） class User { #name; constructor(name) { this.#name = name; } getName() { return this.#name; } }

3. 私有字段的特性

3.1 真正的外部不可访问

class BankAccount { #balance = 0; deposit(amount) { this.#balance += amount; } getBalance() { return this.#balance; } } const account = new BankAccount(); account.deposit(100); console.log(account.getBalance()); // 100 // ❌ 以下都会报错 console.log(account.#balance); // SyntaxError console.log(account['#balance']); // undefined（不是真正的属性名） console.log(Object.keys(account)); // [] - 私有字段不会出现在对象属性中

3.2 硬性私有，无法绕过

class Secret { #password = '123456'; getPassword() { return this.#password; } } const secret = new Secret(); // 所有尝试都无法访问私有字段 console.log(secret.#password); // SyntaxError console.log(secret['#password']); // undefined console.log(Reflect.get(secret, '#password')); // undefined console.log(Object.getOwnPropertyNames(secret)); // [] console.log(JSON.stringify(secret)); // "{}"

3.3 只能在类内部访问

class Parent { #private = 'parent private'; parentMethod() { console.log(this.#private); // ✅ 父类内部可访问 } } class Child extends Parent { childMethod() { // ❌ 子类不能直接访问父类的私有字段 console.log(this.#private); // SyntaxError } }

4. 私有字段 vs 其他方式对比

5. 完整示例对比

// 方式1: 下划线约定 class UserV1 { constructor(name, age) { this._name = name; // 约定私有 this._age = age; } getInfo() { return `${this._name}, ${this._age}`; } } // ❌ 外部仍可访问 const user1 = new UserV1('Alice', 25); console.log(user1._name); // "Alice" - 没真正隐藏 // 方式2: Symbol const _name = Symbol('name'); const _age = Symbol('age'); class UserV2 { constructor(name, age) { this[_name] = name; this[_age] = age; } getInfo() { return `${this[_name]}, ${this[_age]}`; } } // ⚠️ 仍可绕过 const user2 = new UserV2('Alice', 25); const symbols = Object.getOwnPropertySymbols(user2); console.log(user2[symbols[0]]); // "Alice" - 可以访问 // 方式3: WeakMap（真正的私有） const privateData = new WeakMap(); class UserV3 { constructor(name, age) { privateData.set(this, { name, age }); } getInfo() { const data = privateData.get(this); return `${data.name}, ${data.age}`; } } // ✅ 外部无法访问 const user3 = new UserV3('Alice', 25); console.log(user3.name); // undefined console.log(privateData.get(user3)); // 需要 WeakMap 实例，无法访问 // 方式4: 私有字段（最简洁） class UserV4 { #name; #age; constructor(name, age) { this.#name = name; this.#age = age; } getInfo() { return `${this.#name}, ${this.#age}`; } } // ✅ 完全私有，语法最简洁 const user4 = new UserV4('Alice', 25); console.log(user4.#name); // SyntaxError - 无法访问

6. 私有字段的高级用法

6.1 私有方法

class Calculator { #result = 0; // 私有方法 #validateNumber(num) { if (typeof num !== 'number') { throw new Error('参数必须是数字'); } return num; } // 私有方法 #updateResult(value) { this.#result = value; } // 公共方法 add(num) { const validNum = this.#validateNumber(num); this.#updateResult(this.#result + validNum); return this; } getResult() { return this.#result; } } const calc = new Calculator(); calc.add(5).add(3); console.log(calc.getResult()); // 8 // calc.#validateNumber(10); // ❌ 无法调用私有方法

6.2 私有静态字段

class Counter { // 私有静态字段 static #count = 0; constructor() { Counter.#count++; } static getCount() { return Counter.#count; } // 私有静态方法 static #reset() { Counter.#count = 0; } static resetCount() { Counter.#reset(); } } console.log(Counter.getCount()); // 0 new Counter(); new Counter(); console.log(Counter.getCount()); // 2 Counter.resetCount(); console.log(Counter.getCount()); // 0

6.3 私有 getter/setter

class User { #firstName; #lastName; constructor(firstName, lastName) { this.#firstName = firstName; this.#lastName = lastName; } // 私有 getter get #fullName() { return `${this.#firstName} ${this.#lastName}`; } // 公共方法可以使用私有 getter getProfile() { return { name: this.#fullName, initials: `${this.#firstName[0]}.${this.#lastName[0]}.` }; } } const user = new User('Alice', 'Lee'); console.log(user.getProfile()); // { name: "Alice Lee", initials: "A.L." } // user.#fullName ❌ 无法访问

7. 私有字段的注意事项

7.1 不能动态创建

class MyClass { #field = 1; addField() { // ❌ 不能动态创建私有字段 this.#dynamic = 2; // SyntaxError } }

7.2 命名唯一性

class MyClass { #value = 1; method() { // ✅ 同一个类中可以使用多次 console.log(this.#value); this.#value = 2; } } // ❌ 不同类之间的同名私有字段不冲突 class OtherClass { #value = 100; // 这是另一个私有字段 }

7.3 序列化行为

class User { #password = 'secret'; name = 'Alice'; toJSON() { return { name: this.name, // 需要手动暴露私有字段 // #password 不会自动序列化 }; } } const user = new User(); console.log(JSON.stringify(user)); // {"name":"Alice"} console.log(Object.keys(user)); // ["name"]

8. 在 Vue 3 中的应用

Composition API 通过模块作用域、闭包或readonly实现状态封装

<script setup> import { ref, readonly, computed } from 'vue' // 1. 模块级私有（最彻底） const API_KEY = 'secret' function privateHelper() {} // 2. 组件内私有（仅当前组件可访问） const internalState = ref(0) const internalMethod = () => {} // 3. 公开状态（使用 readonly 保护） const publicState = ref('visible') const protectedState = readonly(publicState) // 4. 通过 defineExpose 控制暴露 defineExpose({ protectedState, publicMethod: () => {} }) </script>

9. 浏览器兼容性

10. 总结

一句话总结：

#私有字段是 JavaScript 原生的私有属性语法，提供了真正的封装性，比传统的下划线约定更安全，比 WeakMap 方案更简洁直观。