Reagieren Sie auf ES6-Pfeilfunktionen

Pfeilfunktionen

Pfeilfunktionen ermöglichen es uns, eine kürzere Funktionssyntax zu schreiben:

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

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

Es wird kürzer! Wenn die Funktion nur eine Anweisung hat und die Anweisung einen Wert zurückgibt, können Sie die Klammern und das returnSchlüsselwort entfernen:

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

Wenn Sie Parameter haben, übergeben Sie sie in Klammern:

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

Wenn Sie nur einen Parameter haben, können Sie die Klammern auch überspringen:

hello = val => "Hello " + val;

Worum geht es this?

Auch die Handhabung von thisist bei Pfeilfunktionen anders als bei regulären Funktionen.

Kurz gesagt, bei Pfeilfunktionen gibt es keine Bindung von this.

In regulären Funktionen thisstellt das Schlüsselwort das Objekt dar, das die Funktion aufgerufen hat, was das Fenster, das Dokument, eine Schaltfläche oder was auch immer sein kann.

Bei Pfeilfunktionen repräsentiert das thisSchlüsselwort immer das Objekt, das die Pfeilfunktion definiert hat.

Schauen wir uns zwei Beispiele an, um den Unterschied zu verstehen.

Beide Beispiele rufen eine Methode zweimal auf, zuerst beim Laden der Seite und noch einmal, wenn der Benutzer auf eine Schaltfläche klickt.

Das erste Beispiel verwendet eine reguläre Funktion und das zweite Beispiel eine Pfeilfunktion.

Das Ergebnis zeigt, dass das erste Beispiel zwei verschiedene Objekte (Fenster und Schaltfläche) zurückgibt und das zweite Beispiel das Header-Objekt zweimal zurückgibt.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();

//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();


//The window object calls the function:
window.addEventListener("load", myheader.changeColor);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Denken Sie an diese Unterschiede, wenn Sie mit Funktionen arbeiten. Manchmal ist das Verhalten regulärer Funktionen das, was Sie wollen, wenn nicht, verwenden Sie Pfeilfunktionen.

hello =  "Hello World!";