JavaScript类中#符号的作用是什么？与let/var有何区别？

一、#符号的核心作用 #

你在示例里看到的#color这类变量，是ES2022引入的私有类字段，用来实现类的真正封装。简单说：

• 这些字段只能在类的内部被访问和修改，类外部（包括子类）直接访问会触发语法错误。
• 每个类实例都会拥有独立的私有字段副本，互不干扰。

比如你给的Car类，要是在外部尝试访问myCar.#color，浏览器或Node.js会直接报错，只有在Car类的方法里，通过this.#color才能操作这个属性。

二、和let、var的关键区别 #

1. 访问权限与作用域 #

• #私有字段：作用域严格锁定在类内部，哪怕是类的实例对象，外部也不能直接访问，完全属于类的封装范畴。
• let/var：
  • 如果在类的方法里用let/var声明，作用域仅限当前方法内部，不属于类的实例属性。
  • 如果在类的外部（顶层）声明，那就是全局/模块作用域的变量，和类本身没有归属关系，外部可以直接访问。
  • 注意：类的顶层（方法外面）不能用let/var声明变量，会直接触发语法错误，这和私有字段的声明位置完全不同。

2. 归属关系 #

• #私有字段：是类实例的专属属性，每个new Car()创建的实例，都有自己的#color、#spoiler等字段。
• let/var：
  • 方法内的let/var是局部变量，每次调用方法都会重新初始化（let）或保留上次值（var），不属于实例。
  • 外部的let/var是独立于类的变量，和实例没有关联。

3. 语法与兼容性 #

• #私有字段：属于ES2022语法，需要较新版本的浏览器或Node.js支持；必须在类的顶层声明，不能在方法内部定义。
• let：ES6语法，兼容性比私有字段广，可在任何块级作用域（比如方法、if块）声明。
• var：ES3语法，兼容性最好，但没有块级作用域，容易产生变量提升和作用域污染问题。

举个直观的例子 #

私有字段的使用 #

class Car {
  #color = 'red';

  getColor() {
    // 类内部可以正常访问私有字段
    return this.#color;
  }

  setColor(newColor) {
    this.#color = newColor;
  }
}

const myCar = new Car();
console.log(myCar.getColor()); // 输出'red'
myCar.setColor('blue');
console.log(myCar.getColor()); // 输出'blue'
console.log(myCar.#color); // 报错：SyntaxError: Private field '#color' must be declared in an enclosing class

let在类中的情况 #

class Car {
  getColor() {
    // 方法内的let，仅在这个方法里有效
    let methodColor = 'green';
    return methodColor;
  }
}

// 类外部的let，和Car类无关
let globalColor = 'yellow';

const myCar = new Car();
console.log(myCar.getColor()); // 输出'green'
console.log(globalColor); // 输出'yellow'
// 无法通过myCar访问methodColor，因为它是方法内的局部变量

内容的提问来源于stack exchange，提问作者estudiante