Le variabili JavaScript possono appartenere all’ambito locale o globale.
Le variabili globali possono essere rese locali (private) con le chiusure.
Variabili globali
Un function può accedere a tutte le variabili definite all’interno della funzione, così:
Esempio
var a = 4;
return a * a;
}
Prova tu stesso ”
Ma un function può anche accedere a variabili definite al di fuori della funzione, come questo:
Esempio
funzione myFunction() {
return a * a;
}
Prova tu stesso ”
Nell’ultimo esempio, a è una variabile globale.
In una pagina web, le variabili globali appartengono all’oggetto finestra.
Le variabili globali possono essere usate (e cambiate) da tutti gli script nella pagina (e nella finestra).
Nel primo esempio, a è una variabile locale.
Una variabile locale può essere usata solo all’interno della funzione in cui è definita. È nascosta da altre funzioni e da altro codice di scripting.
Variabili globali e locali con lo stesso nome sono variabili diverse. Modificare una, non modifica l’altra.
Le variabili create senza una parola chiave di dichiarazione (varlet, o const) sono sempre globali, anche se sono create dentro una funzione.
La durata delle variabili
Le variabili globali vivono fino a quando la pagina viene eliminata, come quando si passa ad un’altra pagina o si chiude la finestra.
Le variabili locali hanno vita breve. Sono create quando la funzione è invocata, e cancellate quando la funzione è finita.
Un dilemma sul contatore
Supponiamo che vogliate usare una variabile per contare qualcosa, e che questo contatore sia disponibile per tutte le funzioni.
Si potrebbe usare una variabile globale, e un function per aumentare il contatore:
Esempio
var counter = 0;
// Funzione per aumentare il contatore
funzione add() {
counter += 1;
}
// Chiama add() 3 volte
add();
add();
add();
// Il contatore ora dovrebbe essere 3
Prova tu stesso ”
C’è un problema con la soluzione di cui sopra: Qualsiasi codice nella pagina può cambiare il contatore, senza chiamare add().
Il contatore dovrebbe essere locale alla funzione add(), per evitare che altro codice lo cambi:
Esempio
var counter = 0;
// Funzione per incrementare il contatore
funzione add() {
var counter = 0;
counter += 1;
}
// Chiama add() 3 volte
add();
add();
add();
// Il contatore ora dovrebbe essere 3. Ma è 0
Provate voi stessi ”
Non ha funzionato perché visualizziamo il contatore globale invece di quello locale.
Possiamo rimuovere il contatore globale e accedere al contatore locale lasciando che la funzione lo restituisca:
Esempio
function add() {
var counter = 0;
counter += 1;
return counter;
}
// Chiama add() 3 volte
add();
add();
add();
// Il contatore ora dovrebbe essere 3. Ma è 1.
Prova tu stesso ”
Non ha funzionato perché resettiamo il contatore locale ogni volta che chiamiamo la funzione.
Una funzione interna JavaScript può risolvere questo problema.
Funzioni annidate JavaScript
Tutte le funzioni hanno accesso all’ambito globale.
In effetti, in JavaScript, tutte le funzioni hanno accesso allo scope “sopra” di esse.
JavaScript supporta le funzioni annidate. Le funzioni annidate hanno accesso allo scope “sopra” di esse.
In questo esempio, la funzione interna plus() ha accesso alla variabile counter della funzione padre:
Esempio
var counter = 0;
funzione plus() {counter += 1;}
plus();
return counter;
}
Provate voi stessi ”
Questo avrebbe potuto risolvere il dilemma del contatore, se avessimo potuto raggiungere la funzione plus() dall’esterno.
Abbiamo anche bisogno di trovare un modo per eseguire counter = 0 una sola volta.
Abbiamo bisogno di una chiusura.
Chiusure JavaScript
Ricordate le funzioni autoinvitanti? Cosa fa questa funzione?
Esempio
var counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// il contatore è ora 3
Provate voi stessi ”
Esempio spiegato
La variabile add è assegnata al valore di ritorno di una funzione autoinvitante.
La funzione autoinvitante viene eseguita solo una volta. Imposta il contatore a 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 del genitore.
Questo si chiama chiusura JavaScript. Rende possibile per una funzione avere variabili “private”.
Il contatore è protetto dall’ambito della funzione anonima, e può essere cambiato solo usando la funzione add.
Una chiusura è una funzione che ha accesso all’ambito genitore, anche dopo che la funzione genitore ha chiuso.