JavaScript-Arrow-Funktionen

Pfeilfunktionen wurden in ES6 eingeführt.

Pfeilfunktionen erlauben es uns, kürzere Funktionen zu schreiben:

Syntax

let myFunction = (a, b) => a * b;

Probieren Sie es selbst aus

Zuvor:

hello = function() {
  return "Hello World!";
}

Probieren Sie es selbst aus

Nachdem die Pfeilfunktion verwendet wurde:

hello = () => {
  return "Hello World!";
}

Probieren Sie es selbst aus

wirklich kürzer geworden! Wenn die Funktion nur eine Anweisung hat und diese einen Wert zurückgibt, können Sie die Klammern und return Schlüsselwort:

Standardrückgabewert der Pfeilfunktion:

hello = () => "Hello World!";

Probieren Sie es selbst aus

Anmerkung:Dies gilt nur, wenn die Funktion nur eine Anweisung hat.

Wenn Sie Parameter haben, geben Sie sie in die Klammern ein:

Pfeilfunktion mit Parameter:

hello = (val) => "Hello " + val;

Probieren Sie es selbst aus

Tatsächlich können Sie die Klammern auch weglassen, wenn nur ein Parameter vorhanden ist:

Pfeilfunktion ohne Klammern:

hello = val => "Hello " + val;

Probieren Sie es selbst aus

dies Wie soll ich das machen?

Im Vergleich zu regulären Funktionen hat die Pfeilfunktion eine andere Behandlung für dies verändert sich ebenfalls.

Kurz gesagt, die Verwendung der Pfeilfunktion hat keine Auswirkungen auf dies gebunden.

In regulären Funktionen bedeutet der Schlüsselwort dies das Objekt, das die Funktion aufruft, kann das Fenster, das Dokument, die Schaltfläche oder alles andere sein.

Für Pfeilfunktionen bedeutetdies Das Schlüsselwort zeigt immer das Objekt an, das die Pfeilfunktion definiert.

Lassen Sie uns zwei Beispiele betrachten, um die Unterschiede zu verstehen.

Diese beiden Beispiele rufen die Methode zweimal auf, einmal beim Laden der Seite und einmal, wenn der Benutzer auf die Schaltfläche klickt.

Im ersten Beispiel wird eine reguläre Funktion verwendet und im zweiten Beispiel eine Pfeilfunktion.

Das Ergebnis zeigt, dass im ersten Beispiel zwei verschiedene Objekte (window und button) zurückgegeben werden und im zweiten Beispiel wird zweimal das window-Objekt zurückgegeben, da das window-Objekt der "Eigentümer" der Funktion ist.

Beispiel

Für reguläre Funktionen bedeutet this der Objekt, das die Funktion aufruft:

// Regelmäßige Funktion:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Das Window-Objekt ruft diese Funktion auf:
window.addEventListener("load", hello);
// Der Button-Objekt ruft diese Funktion auf:
document.getElementById("btn").addEventListener("click", hello);

Probieren Sie es selbst aus

Beispiel

wurde die Pfeilfunktion verwendet, dann dies Stellt den Besitzer der Funktion dar:

// Pfeilfunktion:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Das Window-Objekt ruft diese Funktion auf:
window.addEventListener("load", hello);
// Der Button-Objekt ruft diese Funktion auf:
document.getElementById("btn").addEventListener("click", hello);

Probieren Sie es selbst aus

Denken Sie an diese Unterschiede, wenn Sie Funktionen verwenden. Manchmal ist das Verhalten regulärer Funktionen genau das, was Sie möchten, und wenn nicht, verwenden Sie Pfeilfunktionen.

Browser-Unterstützung

Nachstehende Tabelle zeigt die erste Browser-Version, die JavaScript-Pfeilfunktionen vollständig unterstützt:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
September 2015 Juli 2015 Mai 2013 September 2016 September 2015