Wie passieren „dieses“ Fenster setInterval

Question

nehme ich eine Funktion a haben:

function a() { 
    this.b = 1; 
    this.set = setInterval(function() {console.log(this.b);}, 200); 
} 

Also, wenn a.set() wird die anonyme Funktion aufgerufen wird aufgerufen. Aber das wird nicht funktionieren, da dies zu dem Zeitpunkt ist, an dem die Funktion ausgelöst wird, auf das Fensterobjekt zeigt. Es ist auch keine gute Idee a.b zu verwenden, da es mehrere Instanzen von a gibt.

Was ist eine gute Lösung für dieses Problem?

Answer 1

Shop ein Verweis auf this:

function a() { 
    var self = this; 
    self.b = 1; 
    self.set = setInterval(function() {console.log(self.b);}, 200); 
} 

Die anonyme Funktion, die Sie setInterval geben hat Zugriff auf alle Variablen in seiner enthaltenden Bereich, das heißt, alle lokalen Variablen von function a(). Die Magie von JS-Verschlüssen hält diese Variablen am Leben, selbst nachdem a() abgeschlossen wurde und jeder Aufruf von a() seine eigene Schließung erhält.

Answer 2

Speichern Sie einfach Ihre this Referenz in einer anderen Variablen, die nicht von der window -call später überschrieben wird. Später können Sie diese Variable verwenden, um auf das Objekt zu verweisen, mit dem Sie begonnen haben.

function a() { 
    this.b = 1; 
    var that = this; 
    this.set = setInterval(function() {console.log(that.b);}, 200); 
} 

Answer 3

In Ihrem Fall können Sie einfach:

function a() { 
    var _this = this; 
    this.b = 1; 
    this.set = setInterval(function() { 
     console.log(_this.b); 
    }, 200); 
} 

Normalerweise können wir auch eine Hilfsmethode Function.prototype.bind zu fix die this Referenz.

Answer 4

Dies wäre die sauberste Lösung, da die meiste Zeit tatsächlich schalten Sie ruft die diesen Kontext für Ihre aufeinander folgenden Methode wollen:

// store scope reference for our delegating method 
    var that = this; 
    setInterval(function() { 
     // this would be changed here because of method scope, 
     // but we still have a reference to that 
     OURMETHODNAME.call(that); 
    }, 200); 

Answer 5

Da wir ES6 jetzt haben, denke ich, müssen wir eine andere Antwort hier :

einen Pfeil Funktion verwenden:

function a() { 
    this.b = 1; 
    this.set = setInterval(() => {console.log(this.b);}, 200); 
} 

Pfeil Funktionen, haben gegenüber normalen Funktionen, keine this Zusammenhang auf ihre besitzen. Dies bedeutet, dass Sie Zugriff auf die äußere this haben.