TypeScript如何将非静态方法作为回调函数并正确引用this？

问题根源说明 #

你遇到的this丢失问题是JavaScript的原生运行机制导致的，TypeScript作为JS的超集，不会默认修改原生JS的运行时行为，所以不会自动帮你绑定方法的上下文。
至于为什么编译器没有报错：TS的类型系统默认不会对方法的this做强校验，new ClassB().method3的类型本身就符合() => void的参数要求，和method2的入参类型匹配，所以编译器不会抛出错误。如果你希望TS能检查这类问题，可以开启tsconfig.json中的strictBindCallApply配置，同时给方法显式声明this参数，就能在编译期捕获这类错误。

非静态方法作为回调的常用实现方案 #

完全不需要使用静态方法，以下几种方案都非常简便：

• 方案1：类内定义方法时使用箭头函数
  只需要修改ClassB的method3定义，后续传递该方法时不需要做任何额外处理：

export class ClassB {
  // 改为箭头函数定义，this会自动绑定到当前类实例
  method3 = () => {
    this.method4();
  }

  method4() {
    console.log("method4 invoked");
  }
}

该方案的优势是改动量小，调用方无需感知上下文绑定逻辑，适合可以自行控制类实现的场景。唯一的影响是该方法会作为实例属性存在，不会挂载到原型链上，常规业务场景下可以忽略这点性能差异。

• 方案2：传递时用bind绑定实例
  如果你无法修改ClassB的实现，可以在传递方法时手动绑定上下文：

method1() {
  const b = new ClassB();
  // 手动绑定method3的this到b实例
  this.method2(b.method3.bind(b));
}

• 方案3：传递时包裹一层箭头函数
  该方案比bind可读性更好，也更方便透传参数：

method1() {
  const b = new ClassB();
  // 箭头函数内直接调用实例方法，this自然指向b
  this.method2(() => b.method3());
}

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