Reageren ES6 Pijl Functies

Pijlfuncties

Met pijlfuncties kunnen we kortere functiesyntaxis schrijven:

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

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

Het wordt korter! Als de functie slechts één instructie heeft en de instructie een waarde retourneert, kunt u de haakjes en het returntrefwoord verwijderen:

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

Als u parameters heeft, geeft u deze door tussen haakjes:

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

Als je maar één parameter hebt, kun je de haakjes ook overslaan:

hello = val => "Hello " + val;

Wat over this?

Ook de bediening van thisis bij pijlfuncties anders dan bij reguliere functies.

Kortom, met pijlfuncties zijn er geen bindingen van this.

In reguliere functies thisvertegenwoordigde het sleutelwoord het object dat de functie aanriep, wat het venster, het document, een knop of wat dan ook zou kunnen zijn.

Bij pijlfuncties vertegenwoordigt het thistrefwoord altijd het object dat de pijlfunctie heeft gedefinieerd.

Laten we eens kijken naar twee voorbeelden om het verschil te begrijpen.

Beide voorbeelden roepen een methode twee keer aan, eerst wanneer de pagina wordt geladen en nogmaals wanneer de gebruiker op een knop klikt.

Het eerste voorbeeld gebruikt een reguliere functie en het tweede voorbeeld gebruikt een pijlfunctie.

Het resultaat laat zien dat het eerste voorbeeld twee verschillende objecten retourneert (venster en knop), en het tweede voorbeeld het Header-object twee keer retourneert.

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);

Onthoud deze verschillen wanneer u met functies werkt. Soms is het gedrag van reguliere functies wat u wilt, zo niet, gebruik dan pijlfuncties.

hello =  "Hello World!";