Wie gehe ich mit kontextbezogenen Problemen mit „this' in JavaScript um, wenn setTimeout verwendet wird?

setTimeout und „this“ in JavaScript

Bei Verwendung der setTimeout-Funktion innerhalb einer Klassenmethode kann es zu einem Fehler kommen, der darauf hinweist, dass eine andere Methode innerhalb der Klasse (z. B. , „method2“ im bereitgestellten Code) ist nach dem Timeout undefiniert. Dies liegt an der Art und Weise, wie JavaScript das Schlüsselwort this in verschachtelten Funktionen verarbeitet.

Im Beispielcode wird die Funktion setTimeout mit einer angegebenen Verzögerung verwendet, um die Methodenfunktion innerhalb des Testobjekts aufzurufen. Die Funktion method2 wird innerhalb der Methodenfunktion aufgerufen, um ein Bildelement basierend auf einer übergebenen ID abzurufen. Dies funktioniert zunächst ohne Probleme.

Nach dem Timeout wird die Funktion method2 jedoch aufgrund der Art und Weise, wie sie innerhalb der setTimeout-Funktion gebunden ist, undefiniert. Standardmäßig bezieht sich dies auf das globale Objekt, wenn es als Callback innerhalb eines setTimeout aufgerufen wird.

Um dieses Problem zu beheben, besteht eine Lösung darin, .bind(this) an das Ende der an setTimeout übergebenen Funktion anzuhängen. Dadurch wird sichergestellt, dass dieser Kontext korrekt an das Objekt (in diesem Fall das Testobjekt) gebunden ist. Im geänderten Code:

<code class="js">test.prototype.method = function() {
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};</code>

Die Verwendung von .bind(this) ermöglicht es der Funktion method2, den richtigen Kontext im setTimeout-Rückruf beizubehalten, sodass das Bildelement erfolgreich abgerufen und bearbeitet werden kann.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit kontextbezogenen Problemen mit „this' in JavaScript um, wenn setTimeout verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!