JavaScript-pijlfunctie
Pijlfuncties zijn geïntroduceerd in ES6.
Met pijlfuncties kunnen we kortere functiesyntaxis schrijven:
let myFunction = (a, b) => a * b;
Voordat:
hello = function() {
return "Hello World!";
}
Met Pijl Functie:
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:
Pijlfuncties Retourwaarde standaard:
hello = () => "Hello World!";
Opmerking: dit werkt alleen als de functie slechts één instructie heeft.
Als u parameters heeft, geeft u deze door tussen haakjes:
Pijlfunctie met parameters:
hello = (val) => "Hello " + val;
Als je maar één parameter hebt, kun je de haakjes ook overslaan:
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 definieerde.
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 vensterobject twee keer retourneert, omdat het vensterobject de "eigenaar" van de functie is.
Voorbeeld
Met een reguliere functie thisvertegenwoordigt het object dat de functie aanroept :
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Voorbeeld
Met een pijl thisvertegenwoordigt functie de
eigenaar van de functie:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Onthoud deze verschillen wanneer u met functies werkt. Soms is het gedrag van reguliere functies wat u wilt, zo niet, gebruik dan pijlfuncties.
Browserondersteuning
De volgende tabel definieert de eerste browserversies met volledige ondersteuning voor Arrow Functions in JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |