Chiusure JavaScript
Le variabili JavaScript possono appartenere all'ambito locale o globale .
Le variabili globali possono essere rese locali (private) con chiusure .
Variabili globali
A function
può accedere a tutte le variabili definite all'interno della funzione, in questo modo:
Esempio
function myFunction() {
let a = 4;
return a * a;
}
Ma a function
può anche accedere a variabili definite al di fuori della funzione, in questo modo:
Esempio
let a = 4;
function myFunction() {
return a * a;
}
Nell'ultimo esempio, a è una variabile globale .
In una pagina web, le variabili globali appartengono all'oggetto finestra.
Le variabili globali possono essere utilizzate (e modificate) da tutti gli script nella pagina (e nella finestra).
Nel primo esempio, a è una variabile locale .
Una variabile locale può essere utilizzata solo all'interno della funzione in cui è definita. È nascosto da altre funzioni e altro codice di scripting.
Le variabili globali e locali con lo stesso nome sono variabili diverse. Modificandone uno, non si modifica l'altro.
Le variabili create senza una parola chiave di dichiarazione ( var
,
let
, o const
) sono sempre globali, anche se vengono create all'interno di una funzione.
Esempio
function myFunction() {
a = 4;
}
Durata variabile
Le variabili globali sono attive fino a quando la pagina non viene eliminata, come quando si passa a un'altra pagina o si chiude la finestra.
Le variabili locali hanno vita breve. Vengono creati quando la funzione viene richiamata ed eliminati al termine della funzione.
Un controdilemma
Supponiamo di voler usare una variabile per contare qualcosa e di volere che questo contatore sia disponibile per tutte le funzioni.
Potresti usare una variabile globale e una function
per aumentare il contatore:
Esempio
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
C'è un problema con la soluzione sopra: qualsiasi codice nella pagina può cambiare il contatore, senza chiamare add().
Il contatore dovrebbe essere locale alla add()
funzione, per evitare che altro codice lo modifichi:
Esempio
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Non ha funzionato perché visualizziamo il contatore globale invece del contatore locale.
Possiamo rimuovere il contatore globale e accedere al contatore locale lasciando che la funzione lo restituisca:
Esempio
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
Non ha funzionato perché azzeriamo il contatore locale ogni volta che chiamiamo la funzione.
Una funzione interna di JavaScript può risolvere questo problema.
Funzioni nidificate JavaScript
Tutte le funzioni hanno accesso all'ambito globale.
Infatti, in JavaScript, tutte le funzioni hanno accesso all'ambito "sopra" di esse.
JavaScript supporta le funzioni nidificate. Le funzioni nidificate hanno accesso all'ambito "sopra" di esse.
In questo esempio, la funzione interna plus()
ha accesso alla counter
variabile nella funzione genitore:
Esempio
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Ciò avrebbe potuto risolvere il controdilemma, se potessimo raggiungere la plus()
funzione dall'esterno.
Abbiamo anche bisogno di trovare un modo per eseguire counter = 0
solo una volta.
Abbiamo bisogno di una chiusura.
Chiusure JavaScript
Ricordi le funzioni di auto-invocazione? Cosa fa questa funzione?
Esempio
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Esempio spiegato
La variabile add
viene assegnata al valore di ritorno di una funzione auto-invocabile.
La funzione di richiamo automatico viene eseguita una sola volta. Imposta il contatore su zero (0) e restituisce un'espressione di funzione.
In questo modo add diventa una funzione. La parte "meravigliosa" è che può accedere al contatore nell'ambito padre.
Questa è chiamata chiusura JavaScript . Consente a una funzione di avere variabili " private ".
Il contatore è protetto dall'ambito della funzione anonima e può essere modificato solo utilizzando la funzione di aggiunta.
Una chiusura è una funzione che ha accesso all'ambito padre, anche dopo la chiusura della funzione padre.