TypeScript继承类构造函数无法访问成员值的解决方法

首先，咱们得搞明白为啥会出现这个错误：在ES6类的继承逻辑里，子类构造函数必须先调用super()来完成父类的初始化，而父类A的构造函数里直接调用了init()方法。这时候，子类B的私有实例属性myMember还没被初始化——因为子类的类字段（比如你这里的private myMember = {value:1}）是在super()执行完毕之后，才会被赋值给实例的。所以当父类构造函数里的init()被调用时，this.myMember还是undefined，自然就会报错“Cannot read property 'value' of undefined”。

接下来给你几种可行的解决方案，你可以根据自己的代码场景选择：

方案一：调整父类逻辑，不在构造函数中自动调用init() #

最直接的办法就是修改父类A，把init()的调用权交给子类，让子类在自己的属性初始化完成后再调用init()：

class A { 
  constructor(){ 
    // 移除构造函数里的this.init()调用
  } 
  init(){} 
}

class B extends A { 
  private myMember = {value:1}; 
  constructor(){ 
    super(); 
    this.init(); // 现在调用init()，myMember已经初始化完成
  } 
  init(){ 
    console.log(this.myMember.value); // 正常输出1
  } 
}

const x = new B();

方案二：给父类构造函数加开关，控制init()的自动调用 #

如果父类A需要保留自动调用init()的能力，同时支持子类手动控制时机，可以给父类构造函数加一个参数：

class A { 
  constructor(autoInit = true){ 
    if(autoInit) {
      this.init();
    }
  } 
  init(){} 
}

class B extends A { 
  private myMember = {value:1}; 
  constructor(){ 
    super(false); // 关闭父类的自动init()调用
    this.init(); // 手动在合适时机调用
  } 
  init(){ 
    console.log(this.myMember.value); // 正常输出1
  } 
}

const x = new B();

方案三：异步延迟init()调用（特殊场景可用） #

如果实在不能修改父类的构造逻辑，还可以利用微任务队列把init()的调用推迟，让子类属性先完成初始化。不过这种方式会让init()变成异步，可能影响业务逻辑顺序，只适合特殊场景：

class A { 
  constructor(){ 
    queueMicrotask(() => this.init()); // 延迟到微任务执行
  } 
  init(){} 
}

class B extends A { 
  private myMember = {value:1}; 
  constructor(){ 
    super(); 
  } 
  init(){ 
    console.log(this.myMember.value); // 正常输出1
  } 
}

const x = new B();

总结一下，最稳妥且符合同步逻辑的方式还是前两种，通过调整父类和子类的初始化流程，确保init()是在子类所有实例属性都初始化完成之后再调用。

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