JavaScript新风格类继承第三方类时，super调用顺序导致重写方法无法访问子类属性的问题解决方案

你遇到的这个问题是JavaScript类继承里的典型陷阱——父类构造函数执行时会调用被子类重写的方法，但此时子类的实例属性还没来得及初始化（毕竟新语法要求必须先调用super()才能访问this）。就像你的代码里，父类A的构造函数一上来就调用create，而子类B的create依赖this.options，但this.options要等super()执行完才能赋值，自然就会触发TypeError。

因为父类代码不是你维护的，没法修改它的构造逻辑，咱们只能从子类入手，绕开这个问题。下面给你几个可行的解决方案：

方案1：临时替换create方法，避免super调用时执行子类逻辑 #

思路是在调用super()之前，先把子类的create临时替换成空方法，等父类构造函数执行完毕、子类属性初始化完成后，再恢复原方法并手动触发一次：

class B extends A {
  constructor(options) {
    // 先保存子类原本的create方法
    const originalCreate = this.create;
    // 临时替换为空方法，让父类构造函数调用时不执行子类的逻辑
    this.create = () => {};
    
    // 调用父类构造函数，此时不会触发报错
    super();
    
    // 恢复子类原本的create方法
    this.create = originalCreate;
    // 初始化子类属性
    this.options = options;
    // 手动调用create完成初始化
    this.create();
  }
  
  create() {
    let title = this.options.title; // 此时this.options已经存在
    console.log(title);
  }
}

方案2：利用父类的reload方法（推荐） #

观察到父类A有一个reload方法，它也会调用create。咱们可以利用这个方法，在子类属性初始化完成后再触发正确的create逻辑：

class B extends A {
  constructor(options) {
    // 临时替换create为空方法，避免super调用时报错
    this.create = () => {};
    super();
    
    // 删除临时方法，恢复原型上的create
    delete this.create;
    // 初始化子类属性
    this.options = options;
    // 调用父类的reload，触发子类的create方法
    this.reload();
  }
  
  create() {
    let title = this.options.title;
    console.log(title);
  }
}

这个方案更简洁，前提是父类的reload方法没有额外的副作用，适合你的场景。

方案3：在create方法中做兼容判断 #

如果不想修改构造函数逻辑，也可以在子类的create方法里增加判断，当this.options未初始化时不执行核心逻辑，等后续属性准备好后再手动执行：

class B extends A {
  constructor(options) {
    super();
    this.options = options;
    // 属性初始化后手动调用一次create
    this.create();
  }
  
  create() {
    // 先判断options是否存在，避免报错
    if (!this.options) return;
    let title = this.options.title;
    console.log(title);
  }
}

这个方案的缺点是父类构造函数调用的那次create会无效，但胜在代码改动最小。

核心思路都是先阻止父类构造函数调用未准备好的子类方法，等子类实例属性全部初始化完成后，再触发正确的方法执行，这样就能避开super()执行时的属性未定义问题。

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