Angular2 subscribe понимать стрелку функцию

Question

Я пытаюсь понять стрелки функции машинописного текста на примере Угловая 2 Наблюдаемый метод подписки. Может кто-нибудь объяснить мне:

У меня есть этот код, который работает:

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

, но она должна быть такой же, если я использую это? Но это не работает.

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

     ); 

Answer 1

JS по умолчанию выполняет функции в зоне действия вызывающего абонента. Если вы передадите функцию, которая будет вызвана в другое место, this указывает на вызывающего абонента. В вашем коде вы передаете функцию наблюдаемому с помощью метода subscribe(...), а затем функция вызывается наблюдаемым при событии, которое должно быть выбрано.

Если вы используете функцию стрелки, то this продолжает указывать класс, в котором он определен.

Альтернатива использует .bind(this), чтобы указать, что JS this следует указывать на текущий экземпляр класса.

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

    ); 

Смотрите также https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

1. функция Arrow является анонимным и не связывает свою собственную this. Следовательно, this - this текущего контекста.

2. Нормальная функция связывает this с абонентом, если мы не будем связывать это явно

---

Тогда

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

Может быть

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

Или

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