JavaScript
Pfeilfunktionen

Einführung

Syntax

• x => y // Implizite Rückgabe

• x => {return y} // Explizite Rückkehr

• (x, y, z) => {...} // Mehrere Argumente

• async () => {...} // Async-Pfeilfunktionen

• (() => {...}) () // Sofort aufgerufener Funktionsausdruck

• const myFunc = x

  => x * 2 // Bei einem Zeilenumbruch vor dem Pfeil wird der Fehler "Unerwartetes Token" ausgegeben

• const myFunc = x =>

  x * 2 // Ein Zeilenumbruch nach dem Pfeil ist eine gültige Syntax

Bemerkungen

Einführung

In JavaScript können Funktionen anonym mit der "arrow" ( => ) - Syntax definiert werden, die aufgrund von Common Lisp-Ähnlichkeiten manchmal auch als Lambda-Ausdruck bezeichnet wird .

Die einfachste Form einer Pfeilfunktion hat ihre Argumente auf der linken Seite von => und den Rückgabewert auf der rechten Seite:

item => item + 1 // -> function(item){return item + 1}

Diese Funktion kann sofort aufgerufen werden, indem dem Ausdruck ein Argument bereitgestellt wird:

(item => item + 1)(41) // -> 42

Wenn für eine Pfeilfunktion ein einzelner Parameter verwendet wird, sind die Klammern um diesen Parameter optional. Die folgenden Ausdrücke weisen beispielsweise konstanten Variablen den gleichen Funktionstyp zu:

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

Wenn der Pfeil Funktion keine Parameter Allerdings dauert, oder mehr als ein Parameter, eine neue Reihe von Klammern müssen alle Argumente umhüllen:

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

Wenn der Funktionskörper nicht aus einem einzelnen Ausdruck besteht, muss er in eckige Klammern gesetzt werden und eine explizite return Anweisung verwenden, um ein Ergebnis bereitzustellen:

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

Wenn der Hauptteil der Pfeilfunktion nur aus einem Objektliteral besteht, muss dieses Objektliteral in Klammern stehen:

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

Die zusätzlichen Klammern zeigen an, dass die öffnenden und schließenden Klammern Teil des Objektliteral sind, dh sie sind keine Begrenzer des Funktionskörpers.

Lexical Scoping & Binding (Wert von "this")

Pfeilfunktionen sind lexikalisch begrenzt ; Dies bedeutet , dass sie this Bindung an den Kontext des umgebenden Umfangs gebunden ist. Das heißt, was immer sich this bezieht, kann durch Verwendung einer Pfeilfunktion erhalten werden.

Schauen Sie sich das folgende Beispiel an. Die Klasse Cow hat eine Methode, mit der der Ton, den sie nach 1 Sekunde erzeugt, ausgedruckt werden kann.

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

In der Methode makeSoundLater() bezieht sich this Kontext auf die aktuelle Instanz des Cow Objekts. betsy.makeSoundLater() ich also betsy.makeSoundLater() aufrufen, bezieht sich this Kontext auf betsy .

Durch die Verwendung der Pfeilfunktion bewahren ich die this Kontext , so dass ich Bezug nehmen kann this.sound , wenn es darum geht , es zu drucken, die richtig „moo“ wird ausgedruckt.

Wenn Sie anstelle der Pfeilfunktion eine reguläre Funktion verwendet hätten, würden Sie den Kontext der Klasse verlieren und nicht direkt auf die sound Eigenschaft zugreifen können.

Argumente Objekt

Pfeilfunktionen stellen kein Argumentobjekt bereit. arguments verweisen daher im aktuellen Gültigkeitsbereich einfach auf eine Variable.

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

Daher kennen die Pfeilfunktionen ihren Anrufer / Angerufenen auch nicht .

Während das Fehlen eines Argumentobjekts in einigen Randfällen eine Einschränkung darstellen kann, sind Restparameter im Allgemeinen eine geeignete Alternative.

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

Implizite Rückkehr

Pfeilfunktionen können Werte implizit zurückgeben, indem sie einfach die geschweiften Klammern weglassen, die normalerweise den Funktionskörper einer Funktion umschließen, wenn ihr Körper nur einen einzelnen Ausdruck enthält.

const foo = x => x + 1;
foo(1); // -> 2

Bei der Verwendung von impliziten Rückgaben müssen Objektliterale in Klammern eingeschlossen werden, damit die geschweiften Klammern nicht mit dem Öffnen des Funktionskörpers verwechselt werden.

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

Explizite Rückkehr

Pfeilfunktionen können sich den klassischen Funktionen sehr ähnlich verhalten, indem Sie mit dem Schlüsselwort return explizit einen Wert von ihnen return . Wickeln Sie einfach den Körper Ihrer Funktion in geschweifte Klammern und geben Sie einen Wert zurück:

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

Der Pfeil dient als Konstruktor

TypeError einen TypeError wenn sie mit dem new Schlüsselwort verwendet werden.

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...