Replacing arrow function with anonymous function results in Exception

Question

I am trying out the Anuglar Heroes Tutorial for Typescript. While trying out the services the following code is working:

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

But when I change to code the following it is not working

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

I am getting the following error:

Unhandled Promise rejection: this is null ; Zone: angular ; Task: Promise.then ; Value: TypeError: this is null
this.heroes = heroes;

I have defined heroes inside the class as

heroes: Hero[];

Nitzan Tomer · Accepted Answer · 2016-07-20 07:52:43Z

1

That's because you lose the scope for this when you use a normal function instead of the arrow function.

You can use the Function.prototype.bind function:

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

If you prefer not to use the fat arrow function.

answered Jul 20, 2016 at 7:52

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anirudha Agashe Over a year ago

Just to understand the basics I was playing around. This clears it

Arun Ghosh · Accepted Answer · 2016-07-20 07:52:53Z

0

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. These function expression are best suited for non-method functions.

So this in below function is bind to the this of the callback functoin

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

answered Jul 20, 2016 at 7:52

Arun Ghosh

7,7741 gold badge28 silver badges38 bronze badges

Collectives™ on Stack Overflow

Replacing arrow function with anonymous function results in Exception

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related