转换的JavaScript箭头功能正常功能

Question

我目前经历的角度教程和整个下面的代码来：

getHero(id: number): Promise<Hero> { 
    return this.getHeroes().then(heroes => heroes.find(hero => hero.id === id)); 
} 

出于好奇，我决定用一个正常功能重写回调函数：

getHero(id: number): Promise<Hero> { 
    return this.getHeroes().then(heroes => heroes.find(this.findHero, id)); 
} 

findHero(hero: Hero, index: number, array: Hero[]): boolean { 
    if(hero.id === this.id){ 
     return true; 
    }else{ 
     return false; 
    } 
} 

但是，这给我的错误Property 'id' does not exist on type 'HeroService'.

我怎么可能引用传递给我的callb的id参数ack功能？

Answer 1

id（number）属性被定义为函数getHero的自变量，因此在您的函数findHero中不可用。您尝试使用this.id，但编译器告诉您这样的属性不会在您的类HeroService中退出，这当然是正确的，就好像您希望将该属性作为服务的一部分一样，那么您将不得不执行类似这在你的getHero方法中。

getHero(id: number, ...etc) { 
    this.id = id; 
    // etc. 
} 

但是，这会为你带来另一个问题：作为你的方法getHeroes似乎是异步代码（我可以告诉大家，因为它返回一个Promise）这种做法将导致您的并发问题头痛时，你的方法getHero是从应用程序的不同部分调用两次（或更多次）。第一个getHero呼叫将设置this.id到x但在此期间，异步代码运行时，另一个呼叫getHero将设置为y，使回拨findHero运行响应第一次调用使用不正确的值为id （具体来说，它将读取y作为this.id的值）。

因此...长话短说。您可能想要了解关于CLOSURES的更多信息，以及它们为什么对JavaScript非常重要。简短的回答你的问题，使用此：

getHero(id: number): Promise<Hero> { 
    return this.getHeroes().then(heroes => heroes.find(this.findHero.bind(this, id)); 
} 

，以及为什么需要这就是this是不是你作为使用的功能自动传递定义回调findHero作为

findHero(idToFind: number, hero: Hero, index, array: Hero[]) { 
    return hero.id === idToFind; 
} 

原因其他功能（或方法，如在这种情况下）的参数。因此，通过使用bind，您明确地绑定了此功能的this，以便每当您在findHero中使用this时，它都指向正确的对象。的bind第二个参数是有约束力的id您正在寻找的功能findHero的每一个电话，这样，每当通过bind返回的函数被调用它发生两件事情：

1. 的this势必HeroService。
2. 除了参数 函数通常会收到的参数之外，您还绑定了另一个参数 ，该参数将被自动注入到调用该函数的参数 中。

只是一个小小的音符...您使用打字稿，所以this参数在bind是没有意义的，为打字稿自动绑定在你的类当前实例的所有方法，但你需要它在这种情况下，因为你也想要绑定第二个参数（找到id）。

我希望我帮了忙。