Heim > Artikel > Web-Frontend > Wie greife ich im Rückruf auf das richtige „this“ zu?

Wie greife ich im Rückruf auf das richtige „this“ zu?

WBOYnach vorne: 2023-08-24 09:53:091012Durchsuche

In diesem Tutorial erfahren Sie, wie Sie im Callback auf das richtige „this“ zugreifen.

Schlüsselwort „dieses“

Jede Funktion enthält ein Schlüsselwort namens this, auch „Kontext“ genannt, dessen Wert dadurch bestimmt wird, wie die Funktion aufgerufen wird, nicht dadurch, wie, wann oder wo die Funktion definiert ist. Im Gegensatz zu anderen Variablen wird sie nicht vom lexikalischen Gültigkeitsbereich beeinflusst. Im Vergleich zu anderen Sprachen verhält sich JavaScript etwas anders, wenn das Schlüsselwort „this“ einer Funktion verwendet wird. Es gibt einige weitere Änderungen zwischen dem strikten und dem nicht strikten Modus.

Die Art und Weise, wie die Funktion am häufigsten aufgerufen wird, bestimmt den Wert von „this“ (Laufzeitbindung). Sie kann sich bei jedem Aufruf der Funktion ändern und kann nicht durch Zuweisung zur Ausführungszeit geändert werden. Wie oft die Funktion aufgerufen wird, kann die Methode bind() diesen Wert festlegen, da Pfeilfunktionen keine eigene „this“-Bindung bereitstellen (sie behält den „this“-Wert des umschließenden lexikalischen Kontexts bei).

Was ist ein Rückruf?

Eine Funktion, die Parameter von einer anderen Funktion empfängt, wird Callback genannt und wird normalerweise später in einer externen Funktion verwendet. Unter Funktion höherer Ordnung versteht man externe Funktionen, die Rückrufe akzeptieren.

Callbacks haben ihre eigenen Methoden und Eigenschaften, da Funktionen Objekte in JavaScript sind. Das „this“-Attribut, das einem Rückruf zugewiesen wird, wenn er in einer Funktion höherer Ordnung ausgeführt wird, hängt vollständig davon ab, wie der Rückruf durchgeführt wird, nicht davon, wo, wie oder wann er definiert wird.

Indem wir die Funktion höherer Ordnung untersuchen, die den Rückruf aufruft, können wir den „this“-Wert im Rückruf ermitteln. Die tatsächliche Definition der einschließenden Funktion kann lokal gültige Eigenschaften enthalten, was die Hauptursache für diese Probleme bei Rückrufen ist. Da sich der Kontext des Rückrufs jedoch je nach Aufruf dynamisch ändert, ist die Eigenschaft nicht vorhanden, wenn über die „this“-Bindung im Rückruf auf sie zugegriffen wird.

Jetzt lernen wir, wie wir im Callback auf das richtige „this“ zugreifen.

Verwenden Sie den „Selbst“-Modus

Das Erstellen einer Variablen namens self und das Zuweisen dieses Werts im Rahmen der deklarierten Funktion ist ein typisches Muster. Wir können das gewünschte Verhalten erreichen, indem wir eine neue Variable namens self erstellen (oder jeder andere gültige Variablenname reicht aus) und ihr den Wert „this“ geben.

Beispiel

<html>
<body>
   <h2> 'this' Inside a Callback using the <i> 'self' pattern </i> </h2>
   <button onclick="myFunction()"> Click here </button>
   <div id="root" style="
      background-color: rgb(240, 248, 255);
      border: 1px solid gray;
      margin: 5px 0px;
      padding: 10px;
   ">
      Welcome to Tutorialspoint!
   </div>
   <script>
      const root = document.getElementById('root')
      function myFunction() {
         this.variable = 'I am this variable'
         const variable = 'I am a const variable'
         const self = this
         setTimeout(() => {
            root.innerHTML = this.variable + '<br/>'
            root.innerHTML += variable
         }, 1000)
      }
   </script>
</body>
</html>

Pfeilfunktionen verwenden

ECMAScript 6 erlebt das Debüt von JavaScript-Pfeilfunktionen. Sie haben keine eigenen Bindungen und sind eine sauberere Alternative zu herkömmlichen Funktionsausdrücken. Dies stellt sicher, dass, wenn innerhalb einer Pfeilfunktion darauf verwiesen wird, es im Gültigkeitsbereich als reguläre Variable durchsucht wird.

Beispiel

<html>
<body>
   <h2> 'this' Inside a Callback using the <i> arrow function </i> </h2>
   <button onclick="myFunction('ABC')"> Click here </button>
   <div id="root" style="
      background-color: rgb(240, 248, 255);
      border: 1px solid gray;
      margin: 5px 0px;
      padding: 10px;
   ">
      Welcome to Tutorialspoint!
   </div>
   <script>
      const root = document.getElementById('root')
      function myFunction(name) {
         this.name = name
         let obj = {
            run: function(callback) {
               setTimeout(callback, 1000)
            },
         }
         obj.run(() => {
            root.innerHTML = this.name
         })
      }
   </script>
</body>
</html>

Verwenden Sie eine andere Variable, um das „dieses“ Objekt zu speichern

Das Objekt ist damit verknüpft. Dies ist normalerweise das Objekt, auf das wir tatsächlich zugreifen möchten, wenn wir versuchen, im Rückruf darauf zuzugreifen. Das Erstellen einer Variablen und das Speichern ihres Werts vor dem Callback-Bereich ist eine Möglichkeit, dies zu erreichen (obwohl einige Programmierer davor zurückschrecken, dies zu tun, weil es verwirrend aussieht).

Manche Leute bezeichnen es als „das“ oder „selbst“, aber solange die Terminologie klar ist, spielt es keine Rolle. Diese Problemumgehung funktioniert hervorragend, da die Variable die Anforderungen des lexikalischen Bereichs erfüllt und daher im Rückruf verwendet werden kann. Sie haben weiterhin Zugriff auf die Dynamik des Rückrufs dieser Bindung, was ein weiterer Vorteil dieses Ansatzes ist.

Beispiel

<html>
<body>
   <h2>
      'this' Inside a Callback using the
      <i> another variable to store the 'this' object </i>
   </h2>
   <button onclick="myFunction('XYZ')"> Click here </button>
   <div id="root" style="
      background-color: rgb(240, 248, 255);
      border: 1px solid gray;
      margin: 5px 0px;
      padding: 10px;
   ">
      Welcome to Tutorialspoint!
   </div>
   <script>
      const root = document.getElementById('root')
      function myFunction(name) {
         this.name = name
         let that = this
         let obj = {
            run: function(callback) {
               setTimeout(callback, 1000)
            },
         }
         obj.run(function() {
            root.innerHTML = this.name
         })
      }
   </script>
</body>
</html>

Verwenden Sie die explizite Bindung davon an das Objekt

Wenn wir einen Rückruf definieren, können wir angeben, was wir wollen. Wir können den „this“-Wert mit der Methode bind() festlegen und sicherstellen, dass er während der gesamten Funktionsausführung so bleibt, unabhängig davon, wie oder wo er aufgerufen oder übergeben wird.

Die Methode

bind() ist in jeder Funktion verfügbar und erstellt eine neue Funktion mit der Eigenschaft „this“, die mit dem angegebenen Objekt verbunden ist. Der einzige Unterschied zwischen der zurückgegebenen Funktion und der ursprünglichen Funktion besteht darin, dass Sie die vollständige Kontrolle darüber haben, worauf das Attribut „this“ verweist.

Beispiel

<html>
<body>
   <h2>
      'this' Inside a Callback using
      <i> explicitly binding this to an object </i>
   </h2>
   <button onclick="myFunction('Tutorialspoint')"> Click here </button>
   <div id="root" style="
      background-color: rgb(240, 248, 255);
      border: 1px solid gray;
      margin: 5px 0px;
      padding: 10px;
   ">
      Welcome to Tutorialspoint!
   </div>
   <script>
      const root = document.getElementById('root')
      function myFunction(name) {
         this.name = name
         let callbackFunction = function() {
            root.innerHTML = this.name
         }.bind(this)
         let obj = {
            run: function(callbackFunction) {
               setTimeout(callbackFunction, 1000)
            },
         }
         obj.run(callbackFunction)
      }
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie greife ich im Rückruf auf das richtige „this“ zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich die Element-ID mit jQuery?Nächster Artikel：Wie ändere ich die Element-ID mit jQuery?

In Verbindung stehende Artikel

Mehr sehen