JavaScript/TypeScript中带静态引用的实例方法继承问题

👋 以下示例使用了TypeScript访问修饰符，该问题同样适用于JavaScript开发者。假设我定义了一个父类，在其中声明必要成员并实现了一个共享方法：

// ParentClass.ts
export default class ParentClass {
  private static voo;
  private bar;

  constructor(bar) {
    this.bar = bar;
  }

  private commonMethod(baz) {
    doSomething(ParentClass.voo);
    doSomethingElse(this.bar, baz);
  }
}

之后定义子类继承父类的上述行为：

// ChildClass.ts
export default class ChildClass extends ParentClass {
    voo = "Jake";

    constructor(bar) {
        super(bar)
    }

    public uniqueMethod(ter) {
        doAnotherThing(this.bar);
        this.commonMethod(ter);
    }
}

在ChildClass.uniqueMethod()中调用commonMethod()时，方法内部会引用值为undefined的ParentClass.voo。预期效果为：所有继承的子类完全复用commonMethod的同一份实现，但方法内部需要引用当前子类自身的静态成员——即调用ChildClass.uniqueMethod()时，commonMethod读取ChildClass.voo的值，而非父类的对应静态属性。

若将voo定义为实例成员而非静态成员，可直接规避该问题，但在部分业务场景下，将voo定义为静态成员具备更高的实用性。

核心问题是父类方法中硬编码了ParentClass.voo，静态属性挂载在类构造函数上，实例方法内可通过this.constructor获取当前实例所属的类，无需重复编写commonMethod逻辑即可实现多态访问静态成员，有两种通用成熟实现：

方案1：基础实现（JS/TS通用，改动最小） #

只需要修改父类commonMethod中获取静态属性的逻辑，同时调整访问修饰符即可，子类无需改动核心逻辑：

// 修改后的ParentClass.ts
export default class ParentClass {
  private static voo;
  private bar;

  constructor(bar) {
    this.bar = bar;
  }

  // 注意：private修饰符会阻止子类访问该方法，需改为protected
  protected commonMethod(baz) {
    // 替换硬编码的ParentClass.voo，通过this.constructor获取当前类
    const currentClass = this.constructor as typeof ParentClass;
    doSomething(currentClass.voo);
    doSomethingElse(this.bar, baz);
  }
}

// 修改后的ChildClass.ts
export default class ChildClass extends ParentClass {
    // 必须加static关键字，将voo声明为类的静态成员，和父类定义对齐
    static voo = "Jake";

    constructor(bar) {
        super(bar)
    }

    public uniqueMethod(ter) {
        doAnotherThing(this.bar);
        this.commonMethod(ter); // 调用时会自动读取ChildClass.voo的值
    }
}

注意事项：

• TS环境下必须将父类commonMethod的private修饰符改为protected，private成员仅能在父类内部访问，子类无法调用
• TS环境下需要对this.constructor做类型断言，指定为typeof ParentClass，否则TS会抛出类型错误
• 子类的voo必须添加static关键字，否则会成为实例属性，无法被commonMethod正确读取

方案2：泛型约束实现（TS专属，类型安全更强） #

如果需要提前校验子类是否正确声明了对应的静态成员，可以通过泛型加接口约束实现，漏写静态成员时TS会直接抛出编译错误：

// 定义静态成员的类型约束
interface ClassWithVoo {
  voo: unknown;
}

export default class ParentClass<T extends ClassWithVoo = typeof ParentClass> {
  private static voo;
  private bar;

  constructor(bar) {
    this.bar = bar;
  }

  protected commonMethod(baz) {
    const currentClass = this.constructor as T;
    doSomething(currentClass.voo);
    doSomethingElse(this.bar, baz);
  }
}

// 子类继承时传入自身类作为泛型参数
export default class ChildClass extends ParentClass<typeof ChildClass> {
    static voo = "Jake";

    constructor(bar) {
        super(bar)
    }

    public uniqueMethod(ter) {
        doAnotherThing(this.bar);
        this.commonMethod(ter);
    }
}

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