Funzione freccia JavaScript
Le funzioni delle frecce sono state introdotte in ES6.
Le funzioni freccia ci consentono di scrivere una sintassi delle funzioni più breve:
let myFunction = (a, b) => a * b;
Prima:
hello = function() {
return "Hello World!";
}
Con la funzione freccia:
hello = () => {
return "Hello World!";
}
Si accorcia! Se la funzione ha una sola istruzione e l'istruzione restituisce un valore, puoi rimuovere le parentesi e la
returnparola chiave:
Funzioni freccia Valore restituito per impostazione predefinita:
hello = () => "Hello World!";
Nota: funziona solo se la funzione ha una sola istruzione.
Se hai dei parametri, li passi tra parentesi:
Funzione freccia con parametri:
hello = (val) => "Hello " + val;
Infatti, se hai un solo parametro, puoi saltare anche le parentesi:
Che dire this?
Anche la gestione di thisè diversa nelle funzioni freccia rispetto alle funzioni normali.
In breve, con le funzioni freccia non ci sono binding di
this.
Nelle funzioni normali la thisparola chiave rappresentava l'oggetto che chiamava la funzione, che poteva essere la finestra, il documento, un pulsante o altro.
Con le funzioni freccia la thisparola chiave rappresenta sempre l'oggetto che ha definito la funzione freccia.
Diamo un'occhiata a due esempi per capire la differenza.
Entrambi gli esempi chiamano un metodo due volte, prima quando la pagina viene caricata e ancora una volta quando l'utente fa clic su un pulsante.
Il primo esempio usa una funzione regolare e il secondo esempio usa una funzione freccia.
Il risultato mostra che il primo esempio restituisce due oggetti diversi (finestra e pulsante) e il secondo esempio restituisce due volte l'oggetto finestra, poiché l'oggetto finestra è il "proprietario" della funzione.
Esempio
Con una funzione regolare thisrappresenta l'oggetto che chiama la funzione:
// 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);
Esempio
Con una funzione freccia thisrappresenta il
proprietario della funzione:
// 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);
Ricorda queste differenze quando lavori con le funzioni. A volte il comportamento delle funzioni regolari è quello che vuoi, in caso contrario, usa le funzioni freccia.
Supporto browser
La tabella seguente definisce le prime versioni del browser con supporto completo per le funzioni freccia in JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |