JS类中变量定义在constructor内与类直接声明有何差异？

核心结论 #

常规场景下调整为类顶层字段声明没有负面影响，代码可读性更高，是目前更推荐的写法，但需要注意你示例代码里存在一个非语法本身导致的行为差异。

具体差异说明 #

• 初始化时机不同
  类顶层字段的初始化顺序早于constructor内部代码的执行（如果是子类则在super()执行后、子类constructor代码运行前执行），你原有写法是在constructor最开头赋值，两者最终的赋值效果几乎没有区别。
• 你示例代码存在主动的行为变更（不是顶层声明语法的问题）
  原有实现中load是公共字段，外部可以直接通过实例访问alert.load，但你拟调整的代码里给load加了私有标识#，调整后外部无法访问该字段，属于业务逻辑层面的变更。如果要保持原有行为一致，需要把拟调整代码里的#load改成公共字段声明：

  class Alert {
    constructor(alert) {
      this.alert = alert;
    };
  
    #coolDownTime = 0;
    load = JSON.parse('{}');
  }
  

• 唯一需要考虑的负面因素是老旧环境兼容性
  类公共/私有字段是ES2022推出的标准特性：
  • 现代浏览器（Chrome 74+、Firefox 90+、Safari 14.1+）和Node.js 16.10+ 都原生支持该语法
  • 如果你的项目需要兼容IE、或者未经过Babel/TypeScript转译的低版本运行环境，直接使用该语法会报错

其他注意点 #

顶层字段初始化时的表达式会为每个实例单独执行，你示例中的JSON.parse('{}')会为每个实例生成独立的空对象，不会出现多个实例共享同一个引用的问题，和原有constructor内赋值的效果完全一致。

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