Wie bleibt der Kontext in den „setTimeout'-Rückrufen von JavaScript erhalten?

Kontextbewahrung bei der Verwendung von setTimeout-Rückrufen

Beim Einsatz von setTimeout in JavaScript kann die Übergabe des entsprechenden Kontexts an die Rückruffunktion von entscheidender Bedeutung sein. Angenommen, Sie möchten die Methode this.tip.destroy() nach 1000 Millisekunden aufrufen, vorausgesetzt, dass this.options.destroyOnHide wahr ist. Die Verwendung dieser Methode führt jedoch dazu, dass sie sich auf das globale Fensterobjekt bezieht.

Lösungen zur Kontexterhaltung

Während der Entwicklung von JavaScript sind verschiedene Ansätze entstanden, um diesen Kontext aufzulösen Ausgabe:

• Bindungskontext (ES5): Die Mit der in ES5 eingeführten bind()-Methode können Sie eine neue Funktion mit einem vordefinierten this-Wert erstellen und so verhindern, dass sich das globale this einschleicht:

  if (this.options.destroyOnHide) {
  setTimeout(function() { this.tip.destroy() }.bind(this), 1000);
  }

  Nach dem Login kopieren

• Pfeilfunktionen (ES6): Pfeilfunktionen vereinfachten diesen Prozess, indem sie das Konzept ihres eigenen Werts eliminierten. Wenn innerhalb einer Pfeilfunktion darauf zugegriffen wird, erbt es den this-Wert des umgebenden Bereichs:

  if (this.options.destroyOnHide) {
  setTimeout(() => { this.tip.destroy() }, 1000);
  }

  Nach dem Login kopieren

• Kontext als Argument übergeben (HTML5): HTML5 eingeführt ein standardisierter Ansatz, bei dem der Kontext als Argument an die Callback-Funktion übergeben wird:

  if (this.options.destroyOnHide) {
  setTimeout(function(that) { that.tip.destroy() }, 1000, this);
  }

  Nach dem Login kopieren

Durch die Verwendung Mit einer dieser Techniken können Sie den gewünschten Kontext effektiv beibehalten, wenn Sie setTimeout-Rückrufe verwenden, und so sicherstellen, dass sich Ihr Code wie erwartet verhält.

Das obige ist der detaillierte Inhalt vonWie bleibt der Kontext in den „setTimeout'-Rückrufen von JavaScript erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!