In questo tutorial imparerai a conoscere la funzione freccia JavaScript con l'aiuto di esempi.
La funzione freccia è una delle funzionalità introdotte nella versione ES6 di JavaScript. Ti permette di creare funzioni in modo più pulito rispetto alle normali funzioni. Ad esempio,
questa funzione
// function expression let x = function(x, y) ( return x * y; )
può essere scritto come
// using arrow functions let x = (x, y) => x * y;
utilizzando una funzione freccia.
Sintassi della funzione freccia
La sintassi della funzione freccia è:
let myFunction = (arg1, arg2,… argN) => ( statement(s) )
Qui,
myFunctionè il nome della funzionearg1, arg2,… argNsono gli argomenti della funzionestatement(s)è il corpo della funzione
Se il corpo ha una singola dichiarazione o espressione, puoi scrivere la funzione freccia come:
let myFunction = (arg1, arg2,… argN) => expression
Esempio 1: funzione freccia senza argomento
Se una funzione non accetta alcun argomento, è necessario utilizzare parentesi vuote. Per esempio,
let greet = () => console.log('Hello'); greet(); // Hello
Esempio 2: funzione freccia con un argomento
Se una funzione ha un solo argomento, puoi omettere le parentesi. Per esempio,
let greet = x => console.log(x); greet('Hello'); // Hello
Esempio 3: funzione freccia come espressione
Puoi anche creare dinamicamente una funzione e usarla come espressione. Per esempio,
let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby
Esempio 4: funzioni freccia su più righe
Se il corpo di una funzione ha più istruzioni, è necessario inserirle tra parentesi graffe (). Per esempio,
let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12
questo con la funzione freccia
All'interno di una funzione normale, questa parola chiave si riferisce alla funzione in cui viene chiamata.
Tuttavia, thisnon è associato alle funzioni freccia. La funzione freccia non ha una propria this. Quindi ogni volta che chiami this, fa riferimento al suo ambito padre. Per esempio,
All'interno di una normale funzione
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();
Produzione
25 undefined Finestra ()
Qui l' this.ageinterno this.sayName()è accessibile perché this.sayName()è il metodo di un oggetto.
Tuttavia, innerFunc()è una funzione normale e this.agenon è accessibile perché thisfa riferimento all'oggetto globale (oggetto Finestra nel browser). Quindi, this.ageall'interno della innerFunc()funzione dà undefined.
All'interno di una funzione freccia
function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();
Produzione
25 25
Qui, la innerFunc()funzione viene definita utilizzando la funzione freccia. E all'interno della funzione freccia, si thisriferisce all'ambito del genitore. Quindi, this.agedà 25 .
Argomenti vincolanti
Le funzioni regolari hanno argomenti vincolanti. Ecco perché quando si passano argomenti a una funzione normale, è possibile accedervi utilizzando la argumentsparola chiave. Per esempio,
let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)
Le funzioni freccia non hanno argomenti vincolanti.
Quando si tenta di accedere a un argomento utilizzando la funzione freccia, verrà visualizzato un errore. Per esempio,
let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments
Per risolvere questo problema, puoi utilizzare la sintassi di diffusione. Per esempio,
let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)
Funzione freccia con promesse e richiamate
Le funzioni freccia forniscono una migliore sintassi per scrivere promesse e callback. Per esempio,
// ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));
può essere scritto come
// ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);
Cose da evitare con le funzioni freccia
1. Non utilizzare le funzioni freccia per creare metodi all'interno degli oggetti.
let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined
2. Non è possibile utilizzare una funzione freccia come costruttore . Per esempio,
let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor
Nota : le funzioni freccia sono state introdotte in ES6 . Alcuni browser potrebbero non supportare l'uso delle funzioni delle frecce. Visita il supporto della funzione freccia JavaScript per saperne di più.
