如何使用非静态方法作为回调函数并引用`this`？

Question

基本上，我有以下 TypeScript 代码：

export class ClassA {

  method1() {
    this.method2(new ClassB().method3);
  }

  method2(functionReference: () => void) {
    functionReference();
  }

}

export class ClassB {

  method3() {
    this.method4();
  }

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

}

更熟悉其他 OO 编程语言（Java、C#、C++），我预计运行ning new A().method1(); 最终会导致 method4 ClassB 被调用。相反，我运行进入问题，当 method3 最终是运行并且执行失败时 this 未定义：

TypeError: Cannot read properties of undefined (reading 'method4')

我知道让 this 在 JavaScript 中工作所需的所有技巧，但我希望这种行为在 TypeScript 中更直观。只要 method3 是非静态方法，我希望能够在方法中引用 this，无论从何处调用该方法。

TypeScript 中是否有一个不太繁琐的模式允许我使用非静态方法作为回调函数，就像我在这里尝试做的那样，还是只能使用静态方法？后者听起来并不正确，因为如果确实如此，我希望编译器在我尝试将非静态方法作为函数引用传递的 this.method2(new ClassB().method3) 时失败。

Answer 1

您可以将要传递其引用的方法定义为 class 属性

class ClassB {

  method3 = () => {
    this.method4();
  }

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

}

这样它将在初始化时被定义为箭头函数并且this引用将被保留

TS Playground

Answer 2

在 javascript 中，当您通过引用调用 class 方法时，它们不会绑定到其作用域。

如果将函数绑定到实例，或者将调用包装在函数中，您的代码将正常工作。

关于如何重写 class ClassA 中的 method1 以使其正常工作的一些示例。

将上下文绑定到函数：

  method1() {
    const instance = new ClassB();
    this.method2(instance.method3.bind(instance));
  }

正在结束通话：

  method1() {
    this.method2(()=>new ClassB().method3());
  }

如何使用非静态方法作为回调函数并引用`this`？

How to use non-static methods as callback functions and reference `this`?

typescript

callback

this