为什么ES6类父类构造函数调用重写方法时设置子类属性会失效

所有符合ES标准的JS/TS类继承场景，实例化子类时的执行顺序是固定的：

• 第一步：进入子类构造函数，首先调用super()执行父类的构造函数逻辑
• 第二步：父类构造函数完全执行完毕后，才会执行子类自身的类字段初始化操作（包括你声明的默认值赋值，以及TS编译生成的显式声明字段的初始化）
• 第三步：执行子类构造函数中super()之后的剩余逻辑

代码执行过程拆解 #

以ChildTest2的实例化过程为例：

1. 调用new ChildTest2("Hello World")后先触发父类Parent的构造函数
2. 父类构造函数中调用this.init(initArgs)，此时this指向子类实例，实际执行的是ChildTest2重写的init方法，成功将this.member赋值为"Hello World"
3. 父类构造函数执行完毕，进入子类类字段初始化阶段，你在类中声明的member = "default"会在此时执行，直接将之前赋值的"Hello World"覆盖为默认值
4. 后续调用test()方法，输出的就是覆盖后的默认值"default"

而ChildTest1没有在类层面显式声明member字段，所以子类初始化阶段不会执行任何对member的赋值操作，init方法中赋值的内容就会被保留。

TypeScript 额外说明 #

你提到的「即便没有给成员赋初始值，TS编译后生成的空成员声明也会导致该变量最终为undefined」是TS 3.7以上版本开启useDefineForClassFields配置后的标准行为（当编译目标为ES2022及以上时该配置默认开启）：只要你在类中显式声明了成员变量（哪怕只写类型不写默认值），TS都会按照ES标准编译出对应的初始化逻辑，没有默认值的变量会被赋值为undefined，同样会覆盖父类构造阶段给该字段赋的值。

常见解决方案 #

如果无法修改第三方父类的逻辑，可以用以下方式规避该问题：

• 不要给需要在init方法中赋值的字段设置类层面的默认值，如果需要默认值可以写在init方法内部，例如：

  init(args) {
    this.member = args ?? "default";
  }
  

• 如果只是需要TS做类型检查，不需要实际生成字段声明，可以用declare修饰符声明字段：declare member: string;，该声明仅在编译阶段生效，不会生成实际的初始化代码，也就不会覆盖父类阶段的赋值结果
• 如果能修改子类构造函数，可以在子类构造函数super()执行完成后手动再调用一次init方法，但要注意避免重复初始化的问题

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