JavaScript - dies innerhalb der Timeout mit Pfeilfunktionen

Question

Warum ist this innerhalb der setTimeout gleich dem Objekt, das die Render-Funktion beim Verwenden von Pfeilfunktionen aufgerufen?

class X { 
     constructor(config) { 
     this.data = config.data; 
     this.render_ = config.render; 
     } 
     render() { 
     this.render_(this.data); 
     } 
    } 
    var x = new X({ 
     data: [1, 2, 3], 
     render: (data) => { 
     setTimeout(() => { 
      console.log(this); 
     }, 200); 
     } 
    }); 
    x.render(); 

Answer 1

Lesen Sie den Teil der arrow function documentation, die „Pfeil-Funktionen verwendet als Methode“

zusammenfassend sagt: arrow Funktionen einfach nicht this oder ihre eigene Version von this binden, sondern verweist auf die globalen Fenster Objekt.

Answer 2

Da arrow functions sind lexikalisch gebunden. Das heißt, sie nehmen zum Zeitpunkt der Deklaration den Wert von "this" an. Sie werden nicht durch andere Mittel zur Modifizierung des Werts this beeinflusst, einschließlich der Tatsache, dass sie als eine Methode oder Funktionen wie , apply und call aufgerufen werden.

function F() { 
 
    this.type = 'F'; 
 
    this.logTypeExpression = function() { 
 
    console.log(this.type); 
 
    }; 
 
    this.logTypeArrow =() => { 
 
    console.log(this.type); 
 
    }; 
 
} 
 

 
function G() { 
 
    this.type = 'G'; 
 
} 
 

 
var f = new F(); 
 
var g = new G(); 
 

 
f.logTypeExpression(); // F 
 
f.logTypeArrow(); // F 
 

 
// Now lets give these functions to G 
 
g.logTypeExpression = f.logTypeExpression; 
 
g.logTypeArrow = f.logTypeArrow; 
 

 
g.logTypeExpression(); // G 
 
g.logTypeArrow(); // F(!) (That's because `this` was assigned by the arrow function)

Answer 3

Zu der Zeit, dass der Pfeil-Funktion erstellt wird, wird this auf ein beliebiges Objekt nicht gebunden, so bezieht er sich nach wie vor auf window. Vielleicht möchten Sie versuchen console.log(x);, wenn Sie auf diese bestimmte Instanz verweisen möchten?

Answer 4

Der folgende Code enthält nur einen Verweis auf die Funktion, die Sie mithilfe einer Objektliteralsyntax erstellt haben.

this.render_ = config.render; 

Mit binden (this) wird die Funktion sagen, den Parameter-Objekt als dieser Referenz zu verwenden, wenn die Funktion in der Instanz des X-Objekts aufrufen.

class X { 
    constructor(config) { 
     this.data = config.data; 
     this.render_ = config.render.bind(this); 
    } 
    render() { 
     this.render_(this.data); 
    } 
} 

Auch spielt es keine Rolle, ob es ein Pfeil Funktion oder eine reguläre Funktion Ausdruck in Ihrem Code-Snippet ist.