Detaillierte Erklärung dieser Zeigerfunktion in JS

Die Pfeilfunktion ist eine neue Funktion in ES6. Sie hat kein eigenes this. Ihr this-Punkt wird von der äußeren Codebasis übernommen.

Bei der Verwendung von Pfeilfunktionen sind einige Dinge zu beachten:

• Pfeilfunktionen können nicht als Konstruktoren verwendet werden und verursachen bei Verwendung einen Fehler.
• Der Parameter arguments kann nicht verwendet werden. Wenn Sie ihn verwenden möchten, verwenden Sie rest
• Der Befehl „yield“ kann nicht verwendet werden, daher können Pfeilfunktionen nicht als Generatorfunktionen verwendet werden.
• Da es kein eigenes „this“ hat, ist es unmöglich, den „this“-Zeiger durch Binden, Aufrufen und Anwenden zu ändern.
• Dies bedeutet jedoch nicht, dass der this-Zeiger der Pfeilfunktion statisch ist. Wir können ihn steuern, indem wir den this-Zeiger seiner äußeren Codebibliothek ändern.
• Das This der Pfeilfunktion wird von der äußeren Codebasis geerbt, sodass das This der Pfeilfunktion bei der Definition gebunden wird, während das This der normalen Funktion beim Aufruf bestimmt wird.
• Das this der direkt im Literalobjekt definierten Pfeilfunktion ist nicht an das Objekt gebunden, sondern blickt nach außen. Der einfachste Fall ist die Bindung an Fenster

PS: In der tatsächlichen Entwicklungsumgebung kann React mithilfe von Pfeilfunktionen ein klassisches Problem lösen, auf das ich hier nicht näher eingehen werde.

Sehen wir uns anhand eines Beispiels die Pfeilfunktionen in Aktion an:

const obj = {
  fun1: Funktion () {
    konsole.log(dies);
    zurückgeben () => {
      konsole.log(dies);
    }
  },
  fun2: Funktion () {
    Rückgabefunktion () {
      konsole.log(dies);
      zurückgeben () => {
        konsole.log(dies);
      }
    }
  },
  fun3: () => {
    konsole.log(dies);
  }
}

lass f1 = obj.fun1(); // obj
f1() // Objekt

lass f2 = obj.fun2();
let f2_2 = f2(); // Fenster
f2_2() // Fenster

obj.fun3(); // Fenster

Analyse jeder Ausgabezeile:

let f1 = obj.fun1() // obj

Dies ist offensichtlich eine implizite Bindung, und fun1s this zeigt auf obj

f1() // obj

Die von der vorherigen Zeile zurückgegebene Pfeilfunktion wird hier ausgeführt. Wir analysieren, dass this in der vorherigen Codebasis auf obj zeigt, sodass es direkt geerbt wird und die Pfeilfunktion this auf

objlet f2 =obj.fun2()

Wenn fun2 auf der ersten Ebene ausgeführt wird, wird kein Code gedruckt. Stattdessen wird eine Funktion zurückgegeben und f2 zugewiesen. Hier tritt ein Bindungsverlust auf, und dies zeigt auf das Fenster statt auf das ursprüngliche Objekt (Zuweisung erfolgt).

let f2_2 = f2() // window

f2 () wird ausgeführt und das Rebound-Fenster wird ausgedruckt. Anschließend wird die Pfeilfunktion zurückgegeben und f2_2f zugewiesen.

2_2() // window

Ausführen und Fenster ausdrucken. Zeigt das this im äußeren Code nicht gerade auf window? Hier erbt es also window als this

obj.fun3() // window

Die direkt im Literal definierte Pfeilfunktion kann das „this“ des Objekts nicht erben, sondern schaut eine Ebene weiter nach außen und findet das Fenster, da das Literalobjekt keinen eigenen Gültigkeitsbereich bilden kann, der Konstruktor jedoch schon.

Wie manipulieren wir also den this-Zeiger der Pfeilfunktion?

Die Antwort besteht darin, den this-Zeiger der äußeren Codebasis zu ändern und die Richtung davon zu ändern, bevor die Pfeilfunktion definiert wird.

Basierend auf dem obigen Code:

let fun4 = f2.bind(obj)() // obj
fun4() // Objekt

Wir haben festgestellt, dass der this-Zeiger der Methode der zweiten Ebene geändert wurde und die Pfeilfunktion ebenfalls übernommen wurde.

  fun2: Funktion () {
    return function () { // Das ändern wir hier
      konsole.log(dies);
      return () => { // Wenn es hier definiert ist, wird es vererbt console.log(this);
      }
    }
  },

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!