Wie kann ich in JavaScript-Rückrufen korrekt auf „this“ zugreifen?

Diese Affinität in JavaScript-Rückrufen

In JavaScript kann die Verwendung von Instanzmethoden in Event-Handler-Rückrufen den Umfang von „this“ vom beabsichtigten abweichen Instanz an die Quelle, die den Rückruf aufgerufen hat. Daher wird häufig Code ähnlich dem folgenden Beispiel verwendet:

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

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

Dieser Ansatz ist zwar funktionsfähig, mag aber seltsam erscheinen. Gibt es eine optimalere Lösung?

Abschluss und „diese“ Affinität verstehen

Dieses Problem geht über jQuery hinaus und ergibt sich aus der Handhabung von „dies“ und Abschlüssen durch JavaScript. Abschlüsse ermöglichen verschachtelten Funktionen den Zugriff auf Variablen, die in der umschließenden Funktion definiert sind, wie unten dargestellt:

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

„Dies“ verhält sich jedoch anders. Im Gegensatz zu gewöhnlichen Variablen, die innerhalb eines bestimmten Bereichs konstant bleiben, kann „this“ über Bereiche hinweg dynamisch variieren.

// 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!
  }
  ...
};

Lösung: Aliasing von „this“

Um dies zu umgehen Herausforderung: Mit JavaScript können wir „this“ einer Variablen zuweisen und ihr damit im Wesentlichen einen Alias ​​verleihen. Dadurch können wir in den verschachtelten Funktionen auf das beabsichtigte Objekt verweisen.

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

Das gleiche Prinzip gilt auch für andere Pseudovariablen wie „Argumente“.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript-Rückrufen korrekt auf „this“ zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!