Umgang mit „dieser' Referenz in Prototypmethoden mit setInterval und setTimeout: Was sind die Lösungen?

Umgang mit dieser Referenz in Prototyp-Methoden mit setInterval und setTimeout

In JavaScript verliert eine Prototyp-Methode ihre This-Zuordnung, wenn sie extrahiert und an anderer Stelle übergeben wird. Betrachten Sie den folgenden Code:

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

Dieser Code schlägt mit einem Fehler fehl, da er nicht ordnungsgemäß in die Rückrufe setInterval oder setTimeout eingebunden ist.

Lösungen:

Es gibt mehrere Möglichkeiten, mit diesem Problem umzugehen:

Wrap-Methodenaufruf in anonymer Funktion:

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

Dadurch bleibt dies von der äußeren Funktion mithilfe von a erhalten Hilfsvariable.

Wrap-Methodenaufruf in der Fat-Arrow-Funktion:

setInterval(() => this.baz(), 1000);

Anonyme Fat-Arrow-Funktionen behalten dies von der umgebenden Funktion bei.

Verwenden Sie eine Bindungsfunktion:

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

Bindungsfunktionen wie Function.prototype.bind oder Bibliotheksäquivalente ermöglichen Ihnen die explizite Bindung dieses Kontexts.

Das obige ist der detaillierte Inhalt vonUmgang mit „dieser' Referenz in Prototypmethoden mit setInterval und setTimeout: Was sind die Lösungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!