Wie kann der korrekte Umfang von Instanzmethoden in Ereignishandlern in JavaScript sichergestellt werden?

Sicherstellen des richtigen Umfangs von Instanzmethoden in Event-Handlern: Best Practices

In JavaScript stellt die Verwendung von Instanzmethoden als Rückrufe für Event-Handler eine Herausforderung für den Umfang dar. Die Variable this kann von der Darstellung der Objektinstanz zum Element übergehen, das den Rückruf auslöst. Um dieses Problem anzugehen, verwenden Entwickler häufig den folgenden Ansatz:

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this;
  $('#foobar').bind('click', function() {
    self.doSomething();
    // this.doSomething() would not work here
  })
}

Obwohl es funktioniert, können Bedenken hinsichtlich seiner Lesbarkeit und Effizienz auftreten. Es gibt eine elegantere Lösung, die das Konzept der Abschlüsse nutzt.

Abschlüsse und Variablen-„Channeling“

Abschlüsse ermöglichen eingebetteten Funktionen den Zugriff auf Variablen, die in ihrem übergeordneten Bereich definiert sind, und sie so effektiv zu „kanalisieren“. Betrachten Sie zum Beispiel das folgende Beispiel:

var abc = 1; // we want to use this variable in embedded functions

function xyz() {
  console.log(abc); // it is available here!
  function qwe() {
    console.log(abc); // it is available here too!
  }
  ...
}

Diese Technik ist jedoch für diese Variable wirkungslos, da sie den Gültigkeitsbereich dynamisch ändern kann:

// we want to use "this" variable in embedded functions

function xyz() {
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe() {
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
}

Zuweisen eines Alias ​​zu dieser Variable

Die Lösung besteht darin, diesem einen Alias ​​zuzuweisen und seinen Wert innerhalb der eingebetteten Datei beizubehalten Funktionen.

var abc = this; // we want to use this variable in embedded functions

function xyz() {
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe() {
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
}

Der Einsatz dieser Technik stellt den richtigen Umfang und die Klarheit innerhalb der Event-Handler sicher und bietet einen robusteren und wartbareren Ansatz.

Das obige ist der detaillierte Inhalt vonWie kann der korrekte Umfang von Instanzmethoden in Ereignishandlern in JavaScript sichergestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!