Pfeilfunktionen überarbeitet

Schauen wir uns die Pfeilfunktionen noch einmal an.

Pfeilfunktionen sind nicht nur eine „Abkürzung“ zum Schreiben kleiner Dinge. Sie verfügen über einige sehr spezifische und nützliche Funktionen.

In JavaScript gibt es viele Situationen, in denen wir eine kleine Funktion schreiben müssen, die an anderer Stelle ausgeführt wird.

Zum Beispiel:

• arr.forEach(func) – func wird von forEach für jedes Array-Element ausgeführt.

• setTimeout(func) – func wird vom integrierten Scheduler ausgeführt.

• …es gibt noch mehr.

Es liegt ganz im Sinne von JavaScript, eine Funktion zu erstellen und sie irgendwo zu übergeben.

Und bei solchen Funktionen wollen wir den aktuellen Kontext meist nicht verlassen. Hier kommen Pfeilfunktionen zum Einsatz.

Pfeilfunktionen haben kein „dieses“

Wie wir uns aus dem Kapitel „Objektmethoden“ erinnern, haben Pfeilfunktionen „ this “ nicht. Wird this zugegriffen, erfolgt die Übernahme von außen.

Wir können es zum Beispiel verwenden, um innerhalb einer Objektmethode zu iterieren:

 let group = {
  Titel: „Unsere Gruppe“,
  Schüler: [„John“, „Pete“, „Alice“],

  showList() {
    this.students.forEach(
      student => warning(this.title + ': ' + student)
    );
  }
};

group.showList();

Hier in forEach wird die Pfeilfunktion verwendet, sodass this.title darin genau das gleiche ist wie in der äußeren Methode showList . Das ist: group.title .

Wenn wir eine „normale“ Funktion verwenden würden, würde ein Fehler auftreten:

 let group = {
  Titel: „Unsere Gruppe“,
  Schüler: [„John“, „Pete“, „Alice“],

  showList() {
    this.students.forEach(function(student) {
      // Fehler: Die Eigenschaft „title“ von undefiniert kann nicht gelesen werden
      alarm(this.title + ': ' + student);
    });
  }
};

group.showList();

Der Fehler tritt auf, weil forEach standardmäßig Funktionen mit this=undefined ausführt und daher versucht wird, auf undefined.title zuzugreifen.

Das hat keine Auswirkungen auf die Pfeilfunktionen, da diese einfach nicht über this verfügen.

Pfeilfunktionen können nicht mit new ausgeführt werden

Wenn this nicht der Fall ist, bedeutet dies natürlich eine weitere Einschränkung: Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Sie können nicht mit new aufgerufen werden.

Pfeilfunktionen VS binden

Es gibt einen subtilen Unterschied zwischen einer Pfeilfunktion => und einer regulären Funktion, die mit .bind(this) aufgerufen wird:

• .bind(this) erstellt eine „gebundene Version“ der Funktion.

• Der Pfeil => erzeugt keine Bindung. Die Funktion hat this einfach nicht. Die Suche this genauso wie bei einer regulären Variablensuche: in der äußeren lexikalischen Umgebung.

Pfeile haben keine „Argumente“

Pfeilfunktionen haben auch keine arguments .

Das ist großartig für Dekorateure, wenn wir einen Anruf mit dem aktuellen this und arguments weiterleiten müssen.

Beispielsweise ruft defer(f, ms) eine Funktion ab und gibt einen Wrapper um sie herum zurück, der den Aufruf um ms Millisekunden verzögert:

 Funktion defer(f, ms) {
  Rückgabefunktion() {
    setTimeout(() => f.apply(this, arguments), ms);
  };
}

Funktion sayHi(who) {
  alarm('Hallo, ' + who);
}

let sayHiDeferred = defer(sayHi, 2000);
sayHiDeferred("John"); // Hallo, John nach 2 Sekunden

Das Gleiche würde ohne Pfeilfunktion so aussehen:

 Funktion defer(f, ms) {
  return function(...args) {
    let ctx = this;
    setTimeout(function() {
      return f.apply(ctx, args);
    }, MS);
  };
}

Hier mussten wir zusätzliche Variablen args und ctx erstellen, damit die Funktion in setTimeout diese übernehmen konnte.

Zusammenfassung

Pfeilfunktionen:

• Habe this nicht

• Habe keine arguments

• Kann nicht mit new angerufen werden

• Sie haben auch kein super , aber wir haben es noch nicht studiert. Wir werden auf das Kapitel Klassenvererbung eingehen

Denn sie sind für kurze Codeteile gedacht, die keinen eigenen „Kontext“ haben, sondern im aktuellen funktionieren. Und sie glänzen in diesem Anwendungsfall wirklich.