Kontext von 'this' in ES6

Question

Ich beginne gerade ES6 & ReactJS von einem ES5 Hintergrund zu lernen.

Ich habe mir mit diesem ES6-Code den Kopf verkratzt.

Code # 1:

class App extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { videos: [] }; 

     YTSearch({key: API_KEY, term: 'surfboard'}, function(data) { 
      this.setState({ videos: data }); **//I GET AN ERROR HERE!!** 
     }); 
    } 

    render() { 
     return (
      <div> 
       <SearchBar /> 
      </div> 
     ); 
    } 
} 

ich ein error in this.setState

bundle.js:19826 TypeError: Cannot read property 'setState' of undefined(…)

Aber, wenn ich

Code # 2:

YTSearch({key: API_KEY, term: 'surfboard'}, (data) => { 
    this.setState({ videos: data }); **//I GET AN ERROR HERE!!** 
}); 

Das funktioniert gut.

ich in erster Fall verstehen kann, der Umfang der this in einem allgemeinen function unterscheidet sich in einem Callback (wie AJAX). Aber wie ändert sich das in Beispiel # 2?

Answer 1

In ES6, wenn Sie eine fette Pfeil/Lamda-Funktion schreiben, wird der this Kontext beibehalten (weshalb Ihr zweites Beispiel funktioniert).

Aber in Ihrem ersten Beispiel verwenden Sie function() {} der this Kontext wird nicht beibehalten, so dass das "Dies" innerhalb der Funktion ist nicht das, was Sie erwarten, es ist ein neuer Kontext für die Funktion.

Answer 2

Die if Bindung wird auf die callsite mit normalen function Aussagen, aber mit fat arrows wird die callsite nicht dynamisch eingestellt wird.

Das gesagt; Die this innerhalb der Funktion ist was Sie erwarten, nachdem Sie dies gelesen haben. Sehr nützlich in JQuery Funktionen, weil in der Regel, können Sie dies tun:

reguläre Funktion

function hi(){ 
    var name; 
    $('element').on('action', function(){this.name = 'hi'}); 

    //now the name var is undefined; 
    //instead, the object (element) has a property called name with 'hi'. 
} 

Fett Pfeil

function hi(){ 
    var name; 
    $('element').on('action',() => this.name = 'hi'); 

    //now the name var is 'hi'; 
    //the object (element) has no property 'name' now. 
}