TypeScript中如何实现类方法跨类复用且调用时正确绑定this？

以下是3种可直接落地的实现方案，均能保证方法调用时this正确绑定到当前类实例：

方案1：公共基类继承 #

适合A、B两个类本身逻辑关联性较强，没有其他需要继承的父类的场景，是成本最低的实现方式：

// 抽离公共逻辑到基类
class BaseQueueHandler {
  createQueue() {
    console.log("Has access to this", this);
  }
}

// 类A继承基类
export class A extends BaseQueueHandler {
  constructor() {
    super();
    const queue = this.createQueue();
  }
}

// 类B继承基类
export class B extends BaseQueueHandler {
  constructor() {
    super();
    const queue = this.createQueue();
  }
}

该方案无需额外处理this绑定，TypeScript可自动完成类型推导。

方案2：Mixin混入 #

适合A、B已经有自身需要继承的父类，无法再继承公共基类的场景，可实现多能力的组合注入：

// 定义Mixin构造函数通用类型
type Constructor = new (...args: any[]) => {};

// 定义Queue能力的Mixin函数
function WithQueueMixin<T extends Constructor>(Base: T) {
  return class extends Base {
    createQueue() {
      console.log("Has access to this", this);
    }
  };
}

// 类A使用Mixin，若已有父类则替换入参的Object即可
export class A extends WithQueueMixin(Object) {
  constructor() {
    super();
    const queue = this.createQueue();
  }
}

// 类B使用Mixin
export class B extends WithQueueMixin(Object) {
  constructor() {
    super();
    const queue = this.createQueue();
  }
}

方案3：抽离独立公共方法 #

最轻量的实现，不需要引入继承关系，仅需对公共方法的this做类型声明即可：

// 抽离公共方法，声明this的类型为任意类实例
export function createQueue<T extends object>(this: T) {
  console.log("Has access to this", this);
}

// 类A中挂载为实例方法
export class A {
  createQueue = createQueue;
  constructor() {
    const queue = this.createQueue();
  }
}

// 类B中挂载为实例方法
export class B {
  createQueue = createQueue;
  constructor() {
    const queue = this.createQueue();
  }
}

方案选择建议 #

• 优先选公共基类继承：如果两个类本身有公共属性、后续也可能扩展更多公共方法
• 选择Mixin：如果类已经有父类，或者需要组合多个不同的独立能力
• 选择独立公共方法：如果只需要复用这单个方法，不想引入额外的继承层级

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