Angular中箭头函数正常运行，function关键字报错的原因解析

核心原因在于箭头函数和普通function的this指向规则不同，再加上TypeScript的类型检查机制，导致了这个报错。

1. this指向的本质差异 #

• 箭头函数不会创建自己的this，它会直接捕获所在上下文的this（也就是当前WeatherComponent的实例）。所以在箭头函数回调里，this.isShowResult和this.result都能正确访问到组件的属性。
• 普通function函数的this是由调用它的方式决定的：这里subscribe的回调是由RxJS内部调用的，此时this会指向全局对象（浏览器环境是window）或者在严格模式下指向undefined，根本不是你的组件实例。这不仅会导致无法访问组件属性，TypeScript还会因为无法推断this的具体类型，抛出'this' implicitly has type 'any'的错误。

2. 解决方法 #

方案1：继续使用箭头函数（最推荐） #

这是Angular中处理异步回调的常规写法，简洁且无需额外处理this：

getWeather(city: string) {
  this.api.getWeatherReport(city).subscribe(
    (data: any) => {
      this.isShowResult = true;
      this.result = data;
    },
    (error: any) => {console.log(error);},
    () => {console.log('Weather api call completed');}
  );
}

方案2：给普通function指定this类型并绑定 #

如果一定要用普通function，需要手动给this指定类型，同时通过bind把this绑定到组件实例：

getWeather(city: string) {
  this.api.getWeatherReport(city).subscribe(
    function(this: WeatherComponent, data: any) {
      this.isShowResult = true;
      this.result = data;
    }.bind(this),
    (error: any) => {console.log(error);},
    () => {console.log('Weather api call completed');}
  );
}

这里this: WeatherComponent告诉TypeScript回调里的this是组件实例，bind(this)则确保实际运行时this指向正确。

方案3：提前保存this到变量 #

可以在回调外把组件实例的this存到一个变量（比如self），然后在普通function里用这个变量访问组件属性：

getWeather(city: string) {
  const self = this;
  this.api.getWeatherReport(city).subscribe(
    function(data: any) {
      self.isShowResult = true;
      self.result = data;
    },
    (error: any) => {console.log(error);},
    () => {console.log('Weather api call completed');}
  );
}

TypeScript能自动推断self的类型，同时避免了this指向混乱的问题。

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