Funzioni arrow JavaScript

Le funzioni arrow sono state introdotte in ES6.

Le funzioni arrow ci permettono di scrivere funzioni più brevi:

Sintassi

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

Prova personalmente

Prima:

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

Prova personalmente

Dopo aver utilizzato la funzione arrow:

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

Prova personalmente

Si è accorciato! Se la funzione ha una sola istruzione e questa istruzione restituisce un valore, puoi rimuovere le parentesi e return Parola chiave:

Valore di ritorno predefinito della funzione arrow:

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

Prova personalmente

Nota:Questo funziona solo se la funzione ha una sola istruzione.

Se hai parametri, passali all'interno delle parentesi:

Funzione arrow con parametri:

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

Prova personalmente

In realtà, se c'è solo un parametro, puoi anche saltare le parentesi:

Funzione arrow senza parentesi:

hello = val => "Hello " + val;

Prova personalmente

questo Cosa fare?

Confrontati con le funzioni normali, le funzioni arrow sono più questo elaborazione in modo diverso.

In breve, l'uso delle funzioni arrow non ha influenzato il questo è vincolata.

Nelle funzioni normali, la parola chiave questo rappresenta l'oggetto che chiama la funzione, può essere la finestra, il documento, il pulsante o qualsiasi altra cosa.

Per le funzioni arrow,questo La parola chiave sempre rappresenta l'oggetto che definisce la funzione arrow.

Vediamo due esempi per comprendere le differenze.

Questi due esempi chiamano il metodo due volte, una volta quando la pagina viene caricata e un'altra volta quando l'utente clicca sul pulsante.

Nel primo esempio viene utilizzata una funzione normale, mentre nel secondo esempio viene utilizzata una funzione arrow.

I risultati mostrano che nel primo esempio vengono restituiti due oggetti diversi (window e button), mentre nel secondo esempio vengono restituiti due volte l'oggetto window, poiché l'oggetto window è il 'proprietario' della funzione.

esempio

Per le funzioni normali, il termine this rappresenta l'oggetto che chiama la funzione:

// Funzione normale:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Chiamata della funzione da parte dell'oggetto window:
window.addEventListener("load", hello);
// Chiamata della funzione da parte dell'oggetto button:
document.getElementById("btn").addEventListener("click", hello);

Prova personalmente

esempio

se utilizza una funzione arrow, allora questo Rappresenta il proprietario della funzione:

// Funzione spuntata:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Chiamata della funzione da parte dell'oggetto window:
window.addEventListener("load", hello);
// Chiamata della funzione da parte dell'oggetto button:
document.getElementById("btn").addEventListener("click", hello);

Prova personalmente

Ricorda queste differenze quando si utilizzano le funzioni. A volte, il comportamento delle funzioni normali è esattamente ciò che si desidera, altrimenti si può usare le funzioni spuntate.

Supporto browser

La tabella seguente elenca le versioni dei browser che supportano completamente le funzioni di funzione spuntata JavaScript:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Settembre 2015 Luglio 2015 Maggio 2013 Settembre 2016 Settembre 2015