传递Service方法作为参数时出现Cannot read properties of undefined错误

报错原因 #

你遇到的问题是函数的this上下文绑定丢失。当你直接把this.myService.method作为参数传递给function2时，这个方法脱离了原本的myService实例上下文，执行f()时，方法内部的this不再指向myService，而是变成了undefined（严格模式下），所以会抛出“Cannot read properties of undefined”的错误。而直接调用this.myService.method()时，this会自动绑定到myService实例，所以正常工作。

解决方法 #

这里有几种常用的修复方式：

• 用箭头函数包裹传递的方法
  箭头函数会继承外层作用域的this，确保方法执行时上下文正确：

  function1(): void {
      this.function2(() => this.myService.method());
  }
  

• 使用bind强制绑定上下文
  通过bind创建一个绑定了myService实例的新函数：

  function1(): void {
      this.function2(this.myService.method.bind(this.myService));
  }
  

• 修改function2，调用时指定上下文
  让function2接收函数的执行上下文，用call方法指定this：

  function2(f: Function, context: any) {
      f.call(context);
  }
  
  function1(): void {
      this.function2(this.myService.method, this.myService);
  }
  

• 将Service中的方法定义为箭头函数（若可修改Service）
  把method定义成类的箭头函数属性，它会自动绑定myService实例的this：

  class MyService {
      method = () => {
          // 你的方法逻辑
      };
  }
  

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