JavaScript方法赋值给变量后丢失this指向问题求助

你遇到的这个错误，核心是类方法赋值给变量后丢失了this上下文。当你直接把this.service.getExistingArsByLab赋值给method变量时，这个方法和原类实例的绑定关系就断了——调用method(12)时，方法内部的this不再指向SmbwaService的实例，而是变成了undefined（TypeScript默认启用严格模式），自然找不到otherMethod。

结合你“需要根据条件指向不同方法”的实际场景，推荐以下几种可行的实现方式：

1. 使用bind固定this上下文 #

在赋值方法引用时，通过bind把this绑定到service实例上，这样无论怎么调用method，内部的this都指向原实例：

let method: (x: number) => Observable<SmbwaAr[]>;
// 绑定this到service实例
method = this.service.getExistingArsByLab.bind(this.service);
method(12); // 此时this.otherMethod()能正常调用

这种方式简单直接，非常适合动态切换不同方法的场景——比如你可以根据条件绑定不同的方法：

if (conditionA) {
  method = this.service.methodA.bind(this.service);
} else {
  method = this.service.methodB.bind(this.service);
}

2. 用箭头函数包裹方法调用 #

箭头函数会继承外层作用域的this，所以可以用箭头函数包裹原方法的调用，间接保留上下文：

let method: (x: number) => Observable<SmbwaAr[]>;
method = (labId) => this.service.getExistingArsByLab(labId);
method(12);

这种写法更直观，不需要担心bind的额外开销，同样适配动态切换方法的需求。

3. 在类内部用箭头函数定义方法 #

如果你的类方法不需要被继承，或者可以接受每个实例创建函数副本的开销，可以直接把类方法定义成箭头函数，这样this会永久绑定到实例上，赋值时就不会丢失上下文：

export class SmbwaService {
  // 用箭头函数定义方法
  getExistingArsByLab = (labId: number): Observable<SmwbaAr[]> => {
    this.otherMethod(); // 这里的this永远指向实例
  }

  otherMethod(): void { }
}

// 之后直接赋值即可，无需额外处理
let method: (x: number) => Observable<SmbwaAr[]>;
method = this.service.getExistingArsByLab;
method(12);

这种方式的缺点是每个类实例都会创建一个新的函数副本（而非共享原型链上的方法），不过在大多数业务场景下这个影响可以忽略。

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