JAVASCRIPT CLOUSURES

Le variabili JavaScript possono appartenere all’ambito locale o globale.

Esse possono essere rese locali (private) con le closures.

VARIABLI GLOBALI

Una funzione può accedere a tutte le variabili definite all’interno della funzione, in questo modo:

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

Ma una funzione può anche accedere a variabili definite al di fuori della funzione, come questa:

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 window. Le variabili globali possono essere utilizzate (e modificate) da tutti gli script nella pagina (e nella window). 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 una, non si modifica l’altra. 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.

myFunction();

document.getElementById(“demo”).innerHTML = a * a; //return 16

function myFunction() {
a = 4;
}

CICLO DI VITA DELLE VARIABILI

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 create quando la funzione viene richiamata ed eliminate al termine della funzione.

JAVASCRIPT CLOSURES

Quando una funzione viene invocata sappiamo che viene creato un contesto di esecuzione specifico per quella funzione. Infatti se invochiamo cinque volte la stessa funzione vengono creati cinque contesti di esecuzione separati. Vengono messe in memoria variabili e funzioni interne. Terminato il codice non solo viene rimosso il contesto di esecuzione, ma anche la memoria utilizzata per memorizzare quei valori viene liberata. I valori che vengono inseriti in memoria affinche le istruzioni possano essere eseguite al termine dell’esecuzione vengono rimosse dalla memoria. Quando una funzione ritorna un’altra funzione entra in gioco il concetto di closures. La funzione interna effettua una chiusura sul contesto di esecuzione esterno.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Closure</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /**/
        function fn(a){
            let sum = a + 10;
            console.log(sum);
        }
        fn(5);
        /*In fase di invocazione di fn() viene creato un contesto di
        esecuzione specifico e le variabili a e sum vengono messe in
        memoria con i rispettivi valori. Terminata l'esecuzione quella copia
        di a e di sum vengono rimosse dalla memoria, non esistono più.*/
        function fn2(a){
            let fattore = 1.8;
            return () => {
                let calcolo = (fattore * a) - 10;
                console.log(calcolo);
            }
        }
        const rif = fn2(100);
        /*Dato che fn2 è stata eseguita in questo punto del codice
        e dato che la copia di 100 in a e il valore di fattore
        sono stati rimossi dalla memoria in quanto
        l'esecuzione è terminata, allora rif che deve accedere
        a tali valori non dovrebbe riuscirci.*/
        rif();//Invece rif riesce tranquillamente ad accedere 
        //al valore 100 di a e al valore 1.8 di fattore.
        /*Quando una funzione ritorna un'altra funzione
        entra in gioco il concetto di closures. La funzione
        interna effettua una chiusura sul contesto di esecuzione
        esterno */
        const rif2 = fn2(200);
        rif2();
    </script>
</body>
</html>

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB