Angular2 subscribe understand arrow function

Question

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;
            }

        );

Answer 1

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)
    );

Answer 2

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