TypeScript两段importFile代码差异：为何第一段报http未定义

这是JavaScript/TypeScript里**this上下文绑定**的经典问题，咱们把你的代码拆开来看：

两段代码的核心区别 #

第一段：直接传递方法引用 #

importFile(fileId: string, fileName: string): void { 
  this.fileService.importFileById(fileId, fileName, this.refreshFiles); 
}

这里你把this.refreshFiles直接作为回调传给了importFileById——但你传递的仅仅是这个方法的函数本身，并没有带上它原本属于组件实例的this上下文。

第二段：箭头函数包裹回调 #

importFile(fileId: string, fileName: string): void { 
  this.fileService.importFileById(fileId, fileName, () => { this.refreshFiles(); }); 
}

箭头函数的特性就是不会创建自己的this，它会“继承”外层作用域（也就是你的组件实例）的this。所以当这个箭头函数被调用时，里面的this还是指向你的组件。

为什么第一段会报http is not defined？ #

你的refreshFiles方法依赖组件里注入的http：

refreshFiles(): void { 
  this.http.get('api/Files/GetFiles').subscribe(result => { 
    // 业务逻辑
  }, error => console.error(error)); 
}

当你直接传this.refreshFiles给importFileById时，这个方法被调用时的this已经不是你的组件实例了（具体指向什么取决于importFileById内部怎么调用这个回调，可能是fileService的实例，甚至是undefined）。这时候this.http自然找不到，就会抛出http is not defined的错误。

而用箭头函数包裹后，this始终绑定到你的组件实例，所以调用this.refreshFiles()时，refreshFiles里的this也还是组件实例，能正常访问this.http。

额外的解决思路 #

除了箭头函数，你还可以在组件的构造函数里提前绑定this：

constructor(private http: HttpClient, private fileService: FileService) {
  // 把refreshFiles的this永久绑定到组件实例
  this.refreshFiles = this.refreshFiles.bind(this);
}

这样之后你再直接传递this.refreshFiles作为回调，也不会出现上下文丢失的问题了。

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