I try to understand arrow functions of typescript by the example of Angular 2 Observable subscribe method. Could somebody explain me:

I have this code which works:

 this.readdataservice.getPost().subscribe(
            posts => { this.posts = posts; }
        );

but should it be the same if I use this? But this doesn't work.

this.readdataservice.getPost().subscribe(
            function (posts) {
                this.posts = posts;
            }

        );

I try to understand arrow functions of typescript by the example of Angular 2 Observable subscribe method. Could somebody explain me:

I have this code which works:

 this.readdataservice.getPost().subscribe(
            posts => { this.posts = posts; }
        );

but should it be the same if I use this? But this doesn't work.

this.readdataservice.getPost().subscribe(
            function (posts) {
                this.posts = posts;
            }

        );

• javascript
• angular
• typescript
• arrow-functions

• Arrow functions are not a typescript feature. It's an ES6 feature supported by Typescript. developer.mozilla.org/en/docs/Web/JavaScript/Reference/… – Joel Almeida Commented Nov 25, 2016 at 9:43
• If you'd like to know more about scopes, check: stackoverflow.com/questions/20279484/… – eko Commented Nov 25, 2016 at 9:47
• was searching so much for the same doubt. Thanks :) – Akshay L Kalkur Commented Jun 26, 2018 at 15:03

2 Answers 2

1. Arrow function is anonymous and doesn't bind its own this. Hence, this is this of current context.

2. Normal function binds this to the caller if we don't bind it explicitly

Then

    this.readdataservice.getPost().subscribe(
        posts => { this.posts = posts; }
    );

Can be

    var self = this;
    this.readdataservice.getPost().subscribe(
        function(posts) { self.posts = posts; }
    );

Or

    this.readdataservice.getPost().subscribe(
        function(posts) { this.posts = posts; }.bind(this)
    );

JS by default executes functions in the scope of the caller. If you pass a function around to be called somewhere else, this points to the caller. In your code you pass the function to the observable via the subscribe(...) method and then the function is called by the observable when an event is to be emitted.

If you use arrow function, then this keeps pointing to the class where it is defined.

An alternative is using .bind(this) to tell JS this should keep pointing at the current class instance.

    this.readdataservice.getPost().subscribe(
        function (posts) {
            this.posts = posts;
        }.bind(this)

    );

See also https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions