Wie kann der Kontext von „this“ in JavaScript beibehalten werden, wenn setTimeout asynchron verwendet wird?

setTimeout und das schwer fassbare „this“ in JavaScript

Bei der Verwendung der setTimeout-Funktion in JavaScript tritt häufig ein Problem auf, das unerwartete Verhalten von das Schlüsselwort „this“. Dies tritt auf, wenn eine Methode, die einen setTimeout-Aufruf enthält, auf eine andere Methode verweist, die referenzierte Methode jedoch nach dem Timeout-Zeitraum undefiniert wird.

Dieses Problem ergibt sich aus der Funktionsweise von setTimeout. Wenn eine Funktion als Argument an setTimeout übergeben wird, geht der Kontext von „this“ innerhalb dieser Funktion verloren. Dies liegt daran, dass setTimeout die Funktion asynchron ausführt und zu diesem Zeitpunkt möglicherweise nicht mehr auf den ursprünglichen Kontext von „this“ zugegriffen werden kann.

Um dieses Problem zu beheben, gibt es zwei gängige Lösungen:

1. Verwendung der bind()-Methode

Die bind()-Methode kann verwendet werden, um den Kontext von „this“ innerhalb der an setTimeout übergebenen Funktion beizubehalten. Durch das Anhängen von „.bind(this)“ an das Ende der Funktion bleibt der Kontext explizit erhalten, wie im folgenden Beispiel zu sehen ist:

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2. Pfeilfunktionen

Pfeilfunktionen binden „dies“ automatisch an den umgebenden Kontext. Daher sind keine zusätzlichen Schritte erforderlich, um den korrekten Kontext innerhalb der an setTimeout übergebenen Rückruffunktion beizubehalten:

setTimeout(() => {
    this.foo();
}, 1000);

Durch die Anwendung dieser Techniken auf das bereitgestellte Code-Snippet kann das Problem durch Ändern des Codes wie folgt gelöst werden:

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
};

Das obige ist der detaillierte Inhalt vonWie kann der Kontext von „this“ in JavaScript beibehalten werden, wenn setTimeout asynchron verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!