两种变量声明初始化写法差异及类字段不能用const等的原因

Hey there! Let's break down your questions step by step.

一、Version A 和 Version B 的核心差异 #

这两种写法本质上是类实例属性和全局（模块级）变量的区别，差异非常显著：

• 实例隔离 vs 全局共享

  • Version A 里的 dateArray 是 MainScreen 类的实例属性：每创建一个 MainScreen 实例，都会拥有独立的 dateArray 副本。比如你同时创建两个 MainScreen 对象，它们的数组完全独立，一个添加元素不会影响另一个，适合每个实例需要维护自己数据的场景。
  • Version B 里的 dateArray 是模块级或全局变量：所有 MainScreen 实例共享同一个数组，调用任何实例的 datePreparation 都会修改同一个数据源，很容易在多实例场景下导致数据混乱，还可能引发作用域污染（比如其他代码也定义了同名变量）。

• 访问方式与生命周期

  • Version A 中必须通过 this.dateArray 访问（类方法内），数组的生命周期和实例绑定——实例被销毁后，数组会被JS垃圾回收机制处理；
  • Version B 直接访问 dateArray 即可，但它会一直存在于所在作用域中，直到模块卸载或全局环境被清理，可能造成不必要的内存占用。

二、为什么 Version A 里不能用 const/let/var 初始化 dateArray？ #

你看到的 Version A 写法是 ES6+ 引入的类字段语法（Class Fields），这种语法的规则就是不需要加 const/let/var：

• 类字段语法的设计就是为了简化类实例属性的声明，直接在类体中写 属性名 = 初始值，JS引擎会自动把这个属性挂载到每个类实例上。
• 如果强行添加 const/let/var，会被视为类体中的块级变量声明，而不是类的实例属性。比如你写 const dateArray = [] 在类里，这个变量只能在类体的块级作用域内生效，类方法里通过 this.dateArray 根本访问不到它，而且这本身就不符合类字段的语法规范，会直接触发语法错误。

举个错误示例：

class MainScreen extends Component { 
  const dateArray = []; // ❌ 语法错误，类字段不允许用变量声明关键字
  datePreparation(){ 
    this.dateArray.push(...) // 这里完全访问不到上面的dateArray
  } 
}

如果想让 Version A 里的 dateArray 无法被重新赋值（类似 const 的效果），可以在构造函数里通过 Object.defineProperty 来实现：

class MainScreen extends Component { 
  constructor(props) {
    super(props);
    // 定义一个不可重新赋值的实例属性
    Object.defineProperty(this, 'dateArray', {
      value: [],
      writable: false, // 禁止重新赋值该属性
      enumerable: true,
      configurable: false
    });
  }
  datePreparation(){ 
    // 注意：数组是引用类型，即使属性不可写，依然可以修改数组内容（比如push）
    this.dateArray.push( moment(currentDate).format('YYYY-MM-DD') ) 
  } 
}

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