用匿名函数替换箭头函数会导致异常

Question

我正在为Typescript尝试Anuglar Heroes Tutorial。在尝试服务时，以下代码正在运行：

getHeroes() { 
    this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
}

但是当我改为代码时，它无法正常工作

getHeroes(){
    this.heroService.getHeroes().then(function (heroes:Hero[]) {
      this.heroes = heroes;
    })
}

我收到以下错误：

  

未处理的承诺拒绝：这是空的;区域：角;任务：   Promise.then;值：TypeError：这是null   this.heroes =英雄;

我已经将类中的英雄定义为

heroes: Hero[];

Answer 1

这是因为当您使用普通函数而不是arrow function时，您将失去this的范围。

您可以使用Function.prototype.bind功能：

getHeroes(){
    this.heroService.getHeroes().then(function (heroes:Hero[]) {
      this.heroes = heroes;
    }.bind(this));
}

如果您不想使用胖箭头功能。

Answer 2

  

与函数相比，箭头函数表达式的语法更短   表达式和词汇绑定这个值（不绑定它自己的   this，arguments，super或new.target）。箭头功能总是如此   匿名。这些函数表达式最适合非方法   功能

所以这个在下面的函数中绑定到回调函数的这个

getHeroes(){
    this.heroService.getHeroes().then(function (heroes:Hero[]) {
      this.heroes = heroes;
    })
}