当前位置：首页 > 文章列表 > 文章 > 前端 > JS私有字段怎么用？

JS私有字段怎么用？

2025-09-16 09:17:09 0浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《JS私有字段是什么？》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

JavaScript私有字段以#开头，实现类内部状态的真正私有化，与下划线约定不同，其私有性由语言强制保证，避免外部访问，支持私有方法和访问器，提升封装性与代码健壮性。

什么是JS的私有字段？

JavaScript的私有字段提供了一种在类内部封装状态的强大机制，它们以#符号开头声明，确保了字段只能在定义它们的类内部访问和修改，从而实现了真正的私有性，有效避免了外部代码的意外干预或滥用。

解决方案

在我看来，JavaScript私有字段的引入，终于给开发者提供了一个官方的、语言层面的封装方案，这解决了长期以来我们对类内部状态保护的痛点。过去，我们依赖下划线约定（_propertyName）或者闭包（Closure）来实现“私有”效果，但这些方法要么只是君子协定，要么增加了代码的复杂性。现在，通过在类属性前加上#，我们就能声明一个私有字段，这些字段从类的外部是完全不可见的，任何尝试从外部访问它们都会导致SyntaxError。

这种机制的强大之处在于其强制性。它不是一个建议，而是语言规范。这意味着，当你定义了一个#count私有字段时，除了在Counter类内部，你无法通过myCounter.#count来访问它。这极大地提升了代码的健壮性和可维护性，让类的内部实现细节可以更安心地进行重构，而不用担心会破坏外部依赖。

class Counter {
  #count = 0; // 私有字段

  constructor(initialCount = 0) {
    if (initialCount < 0) {
      throw new Error("Initial count cannot be negative.");
    }
    this.#count = initialCount;
  }

  increment() {
    this.#count++;
    console.log(`Count: ${this.#count}`);
  }

  decrement() {
    if (this.#count > 0) {
      this.#count--;
      console.log(`Count: ${this.#count}`);
    } else {
      console.log("Count cannot go below zero.");
    }
  }

  get currentCount() {
    return this.#count; // 可以在类内部访问私有字段
  }
}

const myCounter = new Counter(5);
myCounter.increment(); // Count: 6
myCounter.decrement(); // Count: 5
console.log(myCounter.currentCount); // 5

// 尝试从外部访问私有字段会报错
// console.log(myCounter.#count); // SyntaxError: Private field '#count' must be declared in an enclosing class

JavaScript私有字段与传统私有变量（下划线约定）有何区别？

这真的是一个核心问题，也是私有字段之所以被引入的关键原因。在我看来，两者之间的区别，就像是“口头约定”和“法律条款”一样。

下划线约定（_propertyName）：这是一种历史悠久的、社区约定俗成的私有化方案。开发者会在属性或方法名前加上一个下划线，以此来“暗示”其他开发者：“嘿，这个是内部使用的，请不要直接访问或修改它。”它完全依赖于开发者的自觉性，没有任何语言层面的强制约束。你可以轻而易举地通过myObject._privateProperty来访问甚至修改它。这种方式在小型项目或团队内部有一定效果，但一旦项目规模扩大、团队成员增多，或者面对不熟悉代码库的开发者，这种约定就很容易被打破，导致意想不到的副作用和bug。它更像是一种“建议”，而非真正的保护。

私有字段（#propertyName）：这则是ECMAScript标准在语言层面提供的真正私有化机制。当你在类中声明一个#property时，JavaScript引擎会强制执行其私有性。任何试图从类定义之外访问或操作这个私有字段的行为，都会立即抛出SyntaxError或TypeError。这提供了一种铁板一块的封装，确保了类的内部状态和实现细节与外部世界完全隔离。它不依赖于任何约定，而是由语言本身来保证。

举个例子，假设我们有一个用户类：

// 使用下划线约定
class UserOld {
  constructor(name, password) {
    this.name = name;
    this._password = password; // 约定为私有
  }

  authenticate(inputPassword) {
    return this._password === inputPassword;
  }
}

const oldUser = new UserOld("Alice", "secret123");
console.log(oldUser._password); // 'secret123' - 可以直接访问，甚至修改 oldUser._password = "newPassword"

// 使用私有字段
class UserNew {
  #password; // 真正的私有字段

  constructor(name, password) {
    this.name = name;
    this.#password = password;
  }

  authenticate(inputPassword) {
    return this.#password === inputPassword;
  }
}

const newUser = new UserNew("Bob", "secure456");
// console.log(newUser.#password); // SyntaxError: Private field '#password' must be declared in an enclosing class

显然，私有字段提供了更强的封装性和安全性，是实现健壮、可维护的面向对象设计的更优选择。

如何在JavaScript类中使用私有方法和私有访问器？

私有字段的#语法糖，不仅适用于属性，同样也适用于方法和访问器（getter/setter）。这让类的内部逻辑封装变得更加彻底，让我们可以隐藏那些只服务于类内部的辅助函数或计算逻辑，避免它们暴露给外部，造成API污染。

私有方法：当你有一些辅助函数，它们只在类的其他方法内部被调用，并且不应该成为类公共API的一部分时，就可以将它们定义为私有方法。这使得类的公共接口保持简洁，只暴露必要的功能。

class DataProcessor {
  #data = [];

  constructor(initialData) {
    this.#data = initialData;
  }

  #validate(value) { // 私有方法
    if (typeof value !== 'number') {
      throw new Error("Data must be a number.");
    }
    return true;
  }

  #calculateAverage() { // 另一个私有方法
    if (this.#data.length === 0) return 0;
    const sum = this.#data.reduce((acc, num) => acc + num, 0);
    return sum / this.#data.length;
  }

  addData(value) {
    this.#validate(value); // 在公共方法中调用私有方法
    this.#data.push(value);
  }

  getAverage() {
    return this.#calculateAverage(); // 在公共方法中调用私有方法
  }
}

const processor = new DataProcessor([10, 20, 30]);
processor.addData(40);
console.log(processor.getAverage()); // 25

// processor.#validate(50); // SyntaxError
// processor.#calculateAverage(); // SyntaxError

私有访问器（Getter/Setter）：有时，你可能需要一个内部的计算属性，或者一个需要在设置时进行复杂验证的属性，但你又不希望这些访问器直接暴露为公共接口。这时，私有访问器就派上用场了。它们允许你在类内部以属性的方式访问或修改私有字段，同时保持其私有性。

class TemperatureSensor {
  #celsius = 0;

  constructor(initialCelsius) {
    this.#setCelsius(initialCelsius); // 通过私有setter初始化
  }

  #setCelsius(value) { // 私有setter
    if (value < -273.15) { // 绝对零度检查
      throw new Error("Temperature cannot be below absolute zero.");
    }
    this.#celsius = value;
  }

  #getCelsius() { // 私有getter
    return this.#celsius;
  }

  getFahrenheit() {
    return (this.#getCelsius() * 9 / 5) + 32; // 使用私有getter
  }

  setTemperature(celsius) {
    this.#setCelsius(celsius); // 通过公共方法调用私有setter
  }
}

const sensor = new TemperatureSensor(25);
console.log(sensor.getFahrenheit()); // 77

sensor.setTemperature(100);
console.log(sensor.getFahrenheit()); // 212

// sensor.#setCelsius(50); // SyntaxError
// sensor.#getCelsius(); // SyntaxError

通过私有方法和私有访问器，我们可以构建出更内聚、更清晰的类结构，将内部实现细节完全隐藏起来，只对外提供一个简洁、稳定的API接口。

JavaScript私有字段的兼容性与使用注意事项有哪些？

虽然私有字段是JavaScript中一个非常受欢迎的特性，但作为开发者，我们总得考虑它的实际落地和一些使用上的细节。

兼容性：私有字段是ECMAScript 2022（ES13）标准的一部分，这意味着它是一个相对较新的特性。

现代浏览器：主流浏览器如Chrome (v90+), Firefox (v90+), Edge (v90+), Safari (v14.5+) 对其支持良好。
Node.js：Node.js (v16.0.0+) 也完全支持私有字段。
旧环境：在旧版浏览器或Node.js环境中，私有字段将无法直接运行。如果你需要支持这些旧环境，通常需要通过Babel等工具进行转译（transpilation）。不过，随着时间的推移，对转译的需求会越来越少。

使用注意事项：

实例绑定，而非原型绑定：私有字段是绑定到类的每个实例上的，而不是绑定到类的原型上。这意味着每个实例都会有自己独立的私有字段副本。这与公共方法通常定义在原型上以节省内存的做法不同。

继承性：这是一个重要的点。私有字段是不会被子类继承的。子类无法直接访问或修改父类的私有字段。如果子类需要与父类的私有状态交互，父类必须提供公共或受保护的方法来间接操作这些私有字段。这确保了父类的封装性不会因为继承而泄露。

class Parent {
  #privateData = "I am private in Parent";
  getPrivateData() {
    return this.#privateData;
  }
}

class Child extends Parent {
  accessParentPrivate() {
    // return this.#privateData; // SyntaxError: Private field '#privateData' must be declared in an enclosing class
    return this.getPrivateData(); // 正确做法：通过公共方法访问
  }
}

const child = new Child();
console.log(child.accessParentPrivate()); // "I am private in Parent"

in 操作符：你可以使用in操作符来检查一个对象实例是否拥有某个私有字段。这在某些动态场景下可能有用，例如，当你不确定一个对象是否是某个类的实例，或者它是否被正确初始化时。
```
class MyClass {
  #myPrivateField = 10;
}

const instance = new MyClass();
console.log(#myPrivateField in instance); // true

const anotherObject = {};
console.log(#myPrivateField in anotherObject); // false
```
序列化：私有字段在对象被序列化（例如，使用JSON.stringify()）时是不会被包含进去的。这通常是期望的行为，因为私有状态通常不应该被外部轻易地暴露或持久化。如果你需要序列化私有数据，你必须提供一个公共方法来返回这些数据，然后手动将其包含在序列化过程中。
命名冲突：由于#前缀的存在，私有字段的名称不会与公共字段或方法发生冲突，这消除了一个潜在的bug源。