Question

我目前正在阅读Angular教程并遇到以下代码：

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'.

我如何引用传递给我的回调函数的id参数？

Answer 1

id（数字）属性被定义为函数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));
}

并将您的回调findHero定义为

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

您需要这个的原因是this不会自动传递给您用作其他函数（或方法，如本例中）的参数的函数。因此，使用bind显式绑定此类函数的this，以便在this中使用findHero时，它指向正确的对象。 bind的第二个参数是将id绑定到函数findHero的每次调用，这样无论何时调用bind返回的函数，它都会发生两次事情：

this绑定到HeroService。
随着论点而来功能通常会收到，你也绑定另一个将自动注入到参数中的参数调用该函数。

只是一个小注意......你正在使用TypeScript，因此this中的bind参数毫无意义，因为TypeScript会自动将类中的所有方法绑定到当前实例，但是你需要在这种情况下，因为您还想绑定第二个参数（id来查找）。

我希望我帮助过。

将javascript箭头函数转换为普通函数

1 个答案: