Angular中Service方法赋值给变量调用时无法访问this报错如何解决？

这个问题本质是JavaScript中普通函数的this运行时绑定规则导致的：

普通函数的this指向由调用时的宿主对象决定，而非定义时的上下文。

当你直接将this.facilityService上的方法赋值给getFacilityEventsFunction变量时，只是提取了方法本身的函数引用，完全丢失了方法原本的宿主对象facilityService的上下文绑定。Angular项目默认开启严格模式，独立调用没有绑定上下文的普通函数时，内部this指向为undefined，因此执行this.http.get时就会抛出无法读取undefined属性的错误。
而你直接用this.facilityService.getPastTimelineFacilities(0)调用时，方法的宿主对象明确是facilityService实例，this指向正确，因此运行正常。

下面是4种常用的可行方案，可根据场景选择：

• 方案1：赋值时用bind方法绑定上下文
  提取方法时通过bind永久绑定this指向为service实例：

  const getFacilityEventsFunction = this.isPastActivated
    ? this.facilityService.getPastTimelineFacilities.bind(this.facilityService)
    : this.facilityService.getFutureTimelineFacilities.bind(this.facilityService);
  this.facilityEvents$ = getFacilityEventsFunction(this.iteration);
  

• 方案2：用箭头函数包装调用逻辑
  箭头函数的this继承自定义时的外层上下文，不会丢失service引用：

  const getFacilityEventsFunction = (iteration: number) => this.isPastActivated
    ? this.facilityService.getPastTimelineFacilities(iteration)
    : this.facilityService.getFutureTimelineFacilities(iteration);
  this.facilityEvents$ = getFacilityEventsFunction(this.iteration);
  

• 方案3：调用时通过call/apply手动指定this
  调用函数时显式传入要绑定的this对象：

  const getFacilityEventsFunction = this.isPastActivated
    ? this.facilityService.getPastTimelineFacilities
    : this.facilityService.getFutureTimelineFacilities;
  this.facilityEvents$ = getFacilityEventsFunction.call(this.facilityService, this.iteration);
  

• 方案4：Service层定义方法时直接用箭头函数
  在Service内部定义方法时就用箭头函数，让this永久绑定到Service实例：

  // facility.service.ts 中修改方法定义
  getPastTimelineFacilities = (iteration: number) => {
    return this.http.get(...) // 此处this永远指向当前Service实例
  }
  

  注意：该方案会导致方法无法被类继承重写，若不需要继承可放心使用。

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