Chiudi JavaScript

Le variabili JavaScript appartengono aLocaleLocaleGlobaleO

Contesto.ChiusuraLe variabili globali possono essere accedute tramite

Può implementare locale (privato).

Variabile globaleLa funzione può accedere a variabili definiteInterna

Esempio

function myFunction() {
    var a = 4;
    return a * a;
}

Prova tu stesso

Ma la funzione può anche accedere a variabili definiteEsternaVariabili definite, come:

Esempio

var a = 4;
function myFunction() {
    return a * a;
}

Prova tu stesso

Nell'ultimo esempio:a èGlobaleVariabile.

Nella pagina web, le variabili globali appartengono all'oggetto window.

Le variabili globali possono essere usate e modificate da tutti gli script nella pagina (e nella finestra).

Nel primo esempio:a èLocaleVariabile.

Le variabili locali possono essere usate solo all'interno della funzione in cui sono definite. Per altre funzioni e script sono invisibili.

Le variabili globali e locali con lo stesso nome sono variabili diverse. Modificare una non cambia l'altra.

nonparola chiave var Le variabili create sono sempre globali, anche se create all'interno di una funzione.

La vita delle variabili

Le variabili globali vivono quanto la tua applicazione (finestra, pagina web).

Le variabili locali non vivono a lungo. Vengono create durante la chiamata della funzione e eliminate alla fine della funzione.

Un dilemma del contatore

Supponiamo che tu voglia usare una variabile per contare e che tu voglia che questo contatore sia disponibile per tutte le funzioni.

Puoi usare variabili globali e funzioni per incrementare il contatore:

Esempio

// Inizializzazione del contatore
var counter = 0;
// Funzione di incrementazione del contatore
function add() {
  counter += 1;
}
// Chiamare add() tre volte
add();
add();
add();
// A questo punto il contatore dovrebbe essere 3

Prova tu stesso

Questa soluzione ha un problema: qualsiasi codice sulla pagina può modificare il contatore senza chiamare add().

Per la funzione add(), il contatore dovrebbe essere locale per prevenire che altri codici lo cambino:

Esempio

// Inizializzazione del contatore
var counter = 0;
// Funzione di incrementazione del contatore
function add() {
  var counter = 0; 
  counter += 1;
}
// Chiamare add() tre volte
add();
add();
add();
// A questo punto il contatore dovrebbe essere 3. Ma è 0.

Prova tu stesso

Non è utile perché mostriamo il contatore globale invece del contatore locale.

Rendendo la funzione restituisca se stessa, possiamo eliminare il contatore globale e accedere al contatore locale:

Esempio

// Funzione di incrementazione del contatore
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Chiamare add() tre volte
add();
add();
add();
// A questo punto il contatore dovrebbe essere 3. Ma è 1.

Prova tu stesso

Non è utile perché ogni volta che chiamiamo una funzione resettiamo il contatore locale.

Le funzioni interne JavaScript possono risolvere questo problema.

Funzioni annidate JavaScript

Tutte le funzioni hanno il diritto di accedere al contesto globale.

Infatti, in JavaScript, tutte le funzioni hanno il diritto di accedere al loro contesto superiore.

JavaScript supporta le funzioni annidate. Le funzioni annidate possono accedere al loro contesto superiore.

In questo esempio, la funzione interna plus() può accedere a variabili di funzione superiori counter Variabile contatore:

Esempio

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

Prova tu stesso

Così possiamo risolvere il problema del contatore, se possiamo accedere dall'esterno plus() funzione.

Abbiamo bisogno di trovare una funzione che venga eseguita una volta sola counter = 0 metodo.

Abbiamo bisogno di una chiusura (closure).

Chiudi JavaScript

Ricordi la funzione autoeseguita? Cosa farà questa funzione?

Esempio

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// Il contatore è attualmente 3

Prova tu stesso

Esempio di spiegazione

variabile add l'assegnazione è il valore di ritorno della funzione autoeseguita.

Questa funzione autoeseguita viene eseguita una volta sola. Imposta il contatore a zero (0) e restituisce l'espressione di funzione.

Così add diventa una funzione. La “parte più interessante” è che può accedere al contatore dell'ambito padre.

Questo si chiama JavaScript Chiusura. Questo permette alla funzione di avere “PrivatoIl variabile diventa possibile.

Il contatore è protetto dall'ambito di questa funzione anonima e può essere modificato solo tramite la funzione add.

La chiusura (closure) è una funzione che ha accesso all'ambito del padre, anche dopo la chiusura della funzione padre.