Warum „var self = this' in JavaScript verwenden?

JavaScript-Idiom: „var self = this“ verstehen

Das „var self = this;“ Idiom kommt häufig in JavaScript-Code vor, insbesondere in Event-Handlern. Es ermöglicht Ihnen, einen Verweis auf das ursprüngliche „dieses“ Objekt innerhalb verschachtelter Funktionen oder innerhalb von Event-Handler-Abschlüssen beizubehalten.

Wenn Sie eine Funktion innerhalb eines Konstruktors oder Objekts definieren, ändert sich der Ausführungskontext und „dieses“ verweist zum globalen Objekt (Fenster) im nicht-strikten Modus. Im strikten Modus ist „this“ undefiniert. Um dies zu vermeiden, verwenden Entwickler „var self = this“, um den Verweis auf das ursprüngliche Objekt beizubehalten.

Warum „var self = this“ verwenden?

Berücksichtigen Sie das Folgendes Beispiel aus der HTML5 SQL Storage Notes-Demo von WebKit:

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

In diesem Code wird „self“ „this“ innerhalb des Konstruktors zugewiesen. Dadurch wird sichergestellt, dass beim Aufrufen der Ereignishandler (z. B. Klicken auf das „Note“-Div) „this“ immer noch auf das ursprüngliche Note-Objekt verweist, sodass Methoden wie „onMouseDown“ korrekt aufgerufen werden können.

Ist „var self = this“ alltäglich?

Ja, diese Redewendung wird häufig in JavaScript-Anwendungen verwendet, insbesondere beim Umgang mit Abschlüssen und Ereignissen Handler. Es ermöglicht Entwicklern, einen Verweis auf den ursprünglichen Kontext innerhalb verschachtelter Funktionen beizubehalten.

Alternativer Ansatz

„var self = this“ ist zwar effektiv, kann aber verwirrend sein lesen. Ein alternativer Ansatz ist die Verwendung von Pfeilfunktionen (eingeführt in ES6), die die „diese“-Bindung des umgebenden Kontexts beibehalten.

Zum Beispiel:

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}

Hinweis:

Von der Verwendung von „var self = this“ wird jetzt abgeraten, da dies aufgrund der Existenz von „window.self“ möglicherweise zu Fehlern führen kann. Es wird empfohlen, Pfeilfunktionen oder andere Alternativen zu verwenden, um „diese“ Bindung aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWarum „var self = this' in JavaScript verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!