Le espressioni di funzione sono funzioni
creato dove è prevista un'espressione. Incontrerai spesso
come valori assegnati a una variabile. Sebbene una dichiarazione di funzione richieda sempre un nome, puoi utilizzare espressioni di funzione per creare funzioni anonime omettendo l'identificatore e seguendo la parola chiave function
con una coppia di parentesi contenenti parametri facoltativi:
const myVariable = function() { };
Puoi quindi chiamarli di funzione utilizzando l'identificatore della variabile:
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
Puoi anche utilizzare le espressioni di funzione per creare funzioni con nome utilizzando una sintassi simile alle dichiarazioni di funzione:
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
Tuttavia, a differenza delle dichiarazioni di funzione, un'espressione di funzione con nome può essere a cui si accede dal nome della funzione solo all'interno della funzione stessa:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
I nomi associati alle espressioni di funzione sono utili principalmente per il debug. R l'espressione di funzione con nome può anche chiamarsi in modo ricorsivo, sebbene non sia una caso d'uso molto comune nello sviluppo moderno:
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
Espressioni della funzione freccia
Espressioni di funzioni freccia (spesso chiamate "funzioni freccia" o, raramente, "lambda" funzioni") sono state introdotte in ES6 per fornire una sintassi concisa per la creazione espressioni di funzione anonime con alcuni comportamenti univoci.
Puoi creare una funzione freccia ovunque sia prevista un'espressione, ad esempio come valore assegnato a una variabile. Nella sua forma più comune, una freccia
è composta da una coppia di parentesi corrispondenti che contengono zero o più
, una freccia composta da un singolo segno di uguale e da un carattere di
(=>
) e una coppia di parentesi graffe corrispondenti contenenti il corpo della funzione:
const myFunction = () => {};
In determinate condizioni, puoi rendere la sintassi ancora più compatta. Se utilizzi un solo parametro, puoi omettere le parentesi graffe iniziali:
const myFunction = myParameter => {};
Quando si desidera che il corpo della funzione restituisce il valore di una singola espressione,
né racchiudere il corpo della funzione tra parentesi graffe
la parola chiave return
è obbligatoria:
const myFunction = () => 2 + 2
myFunction()
> 4
Le funzioni Arrow sono uniche in quanto non hanno un proprio contesto per i valori arguments
o this
. Al contrario, ereditano entrambi
i valori dalla funzione freccia
ambiente che include errori ortografici, il più vicino
che fornisce questi contesti.
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
Funzioni Freccia di chiamata
Le funzioni a freccia non legano gli argomenti nello stesso modo degli
altri tipi di funzioni.
Un oggetto arguments
nel corpo di una funzione freccia eredita il valore da
alla funzione freccia più vicina
ambiente che include errori ortografici:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
In questo esempio, una funzione esterna chiamata con l'argomento false
chiama una
funzione freccia interna con l'argomento true
. Poiché l'oggetto arguments
all'interno della funzione freccia si risolve nell'associazione nella funzione esterna,
La funzione interna registra il valore false
della funzione esterna.
Se non sono presenti oggetti arguments
da ereditare dal contesto padre, la freccia
l'oggetto arguments
della funzione non è definito e il tentativo di accesso determina un
errore:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
Espressioni di funzioni immediatamente richiamate (IIFE)
Un'espressione di funzione Immediately Invoked Function Express (IIFE), a volte chiamata anche "auto-esecuzione di una funzione anonima", è un'espressione di funzione chiamata non appena viene definito. Un IIFE utilizza un'espressione di funzione creata Racchiudere la funzione in un operatore di raggruppamento. Una seconda coppia di parentesi con corrispondenza chiama quindi la funzione, dopo la definizione della funzione stessa o subito dopo il raggruppamento operatore. Se si usa una funzione standard, non c'è alcuna differenza pratica tra i due approcci:
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
Il primo esempio chiama l'espressione di funzione raggruppata. Il secondo esempio chiama una dichiarazione di funzione all'interno degli operatori di raggruppamento e il risultato finale viene quindi valutato come un'espressione raggruppata. Il risultato è lo stesso per verificare se è così.
Tuttavia, c'è una differenza quando il tuo IIFE è una funzione freccia. In questo maiuscole/minuscole, le parentesi utilizzate per chiamare la funzione devono essere fuori dal raggruppamento , poiché una funzione freccia da sola non è un'espressione, ma deve vengano create in un contesto in cui è prevista un'espressione. Stai cercando di chiamare il la funzione freccia nell'ambito degli operatori di raggruppamento significherebbe una funzione a freccia che non è stata ancora creata nel contesto di :
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
Poiché gli operatori di raggruppamento prevedono un'espressione, la funzione freccia al loro interno è definita, consentendo alle parentesi che li seguono di chiamare l'espressione raggruppata:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
Applicazioni legacy, uso frequente di IIFE per gestire l'ambito, in particolare per evitare di inquinare l'ambito globale con variabili basate sulle funzioni e dichiarazioni di funzione. Prima dell'introduzione della definizione dell'ambito dei blocchi in ES6, era pratica comune racchiudere un intero script in un IIFE per evitare l'inquinamento accidentale dell'ambito globale.
Verifica le tue conoscenze
Puoi chiamare un'espressione di funzione con nome per nome al di fuori del ?