Dieses Schlüsselwort in Typoskript bezieht sich nicht auf Klasse

Question

Ich habe ein Problem mit 'diesem' Schlüsselwort in Typoskript. Wie Sie unten sehen können, möchte ich method1 von einer "Inside" -Funktion aufrufen, zum Beispiel FileReader.onloendend. Hovewer, 'this' verweist auf FileReader, nicht auf Klasse foo. Wie kann ich meinen Code ändern, damit dies funktioniert?

export class foo { 

    constructor() { 
     this.method2(); 
    } 

    public method1() { 
     console.log('method1 called');   // this never happens 
    } 

    public method2() { 
     let reader: FileReader = new FileReader(); 

     reader.onloadend = function(e) { 
      console.log(this)     //it prints FileReader object 
      this.method1();     //I want this to be refered to class foo 
     } 
    } 
} 

Answer 1

die neue Funktion Literalsyntax mit weit Pfeiltasten:

public method2() { 
    let reader: FileReader = new FileReader(); 

    reader.onloadend = (e) => { 
     console.log(this) //it no longer prints FileReader object 
     this.method1(); //method1 called 
    } 
} 

Mit weit Pfeile, this jetzt bezieht sich immer auf die Klasse, anstelle des Funktionsumfangs. Sie können die MDN für weitere Informationen über Lexical this und die Kurzform der Funktionssyntax überprüfen.

Die Dokumentation ist für ES6, aber es gilt gleichermaßen für Typoskript, da es eine strenge Obermenge ist. diese

Answer 2

Wechsel:

reader.onloadend = function(e) { 
    console.log(this)     //it prints FileReader object 
    this.method1();     //I want this to be refered to class foo 
} 

dazu:

reader.onloadend = (e) => { 
    console.log(this)     //it prints FileReader object 
    this.method1();     //I want this to be refered to class foo 
} 

Sie können mehr über Pfeil Funktionen here lesen.