Immagine composta da Aphinya Dechalert. Sbloccare i segreti delle chiusure.

Comprensione delle chiusure in JavaScript

In realtà è molto più semplice di quello che altri tutorial stanno cercando di dirti

La chiusura di JavaScript è uno di quegli argomenti che può essere difficile avvolgere la testa, semplicemente per come viene spesso spiegato. La maggior parte dei tutorial ti dice solo che è una funzione all'interno di una funzione, ma in realtà c'è un significato più profondo dietro tutto.

"Scrivere in linguaggio ECMAScript senza capire la chiusura è come scrivere Java senza capire le classi" - Douglas Crockford, padre di JSON

Vediamo il codice qui sotto:

un semplice piccolo pezzo di codice

Tuttavia, il codice sopra non è molto efficiente. Utilizza un ambito globale e non c'è nulla per proteggerlo dal cambiamento.

Molte persone dimenticano spesso che JavaScript è un linguaggio con ambito lessicale. Ciò significa che l'eredità scorre verso l'interno. Una variabile all'esterno di una funzione è disponibile per l'uso all'interno di una funzione ma non viceversa.

Non puoi utilizzare un valore che è stato dichiarato all'interno di una funzione all'esterno di essa.

Il codice seguente è una chiusura perché x è una variabile esterna alla funzione.

La funzione tradizionale all'interno di un esempio di struttura di chiusura della funzioneProva che x è una chiusura nella console del browser

Tuttavia, la domanda diventa allora: se la chiusura è il consumo di una variabile esterna alla funzione, perché il codice seguente non è una chiusura?

Quanto sopra non è una chiusura a causa del modo in cui JavaScript valuta la dichiarazione. L'ambito della funzione viene creato una volta e la memoria viene allocata per essa. L'elaborazione avviene fino a quando non raggiunge la fine della funzione e la memoria viene rilasciata. Non si ottiene permanenza nell'esercizio e qualsiasi valore creato viene perso per sempre.

Non una chiusura perché l'ambito variabile non è esterno alla funzione.

Tuttavia, se avvolgi la tua funzione all'interno di una funzione, crea un altro ambito: una sorta di ring fence attorno al tuo codice che dice a JavaScript di non distruggere la tua funzione quando finisce.

La variabile contatore nel codice seguente diventa la variabile racchiusa perché è esterna alla funzione chiamata (ovvero Incremento). Di conseguenza, è possibile creare un numero illimitato di istanze di funzioni con il proprio set di valori univoci.

Il contatore delle variabili è quindi la chiusura nello snippet di codice sopra.

In un certo senso, le chiusure sono solo funzioni con dati conservati. Quando crei una chiusura, stai dicendo a JavaScript di ricordare lo stato delle cose all'interno della tua funzione e solo le variabili utilizzate sono considerate "chiusure".

Ciò è particolarmente utile perché le chiusure sono funzioni stateful in quanto ricordano i dati delle loro variabili private dopo una chiamata. Le variabili sono private perché le funzioni esterne non possono accedervi con una chiamata esplicita per l'accesso. Ciò consente all'intera funzione di essere autonoma e le sue variabili sono protette da modifiche indesiderate.

Scoping lessicale al lavoro.

Le chiusure in JavaScript sono quindi un modo per sezionare in modo succinto il codice in modo modulare e autonomo senza la necessità di creare esplicitamente una classe. L'uso delle chiusure consente la replicabilità nel codice e riduce la quantità di ambiti globali necessari.

Scrivere chiusure non è solo l'atto di inserire una funzione all'interno di un'altra funzione. È la tecnica utilizzata per creare variabili protette da modifiche esterne, veramente isolate dal resto dell'applicazione e con stato persistente.

Rimaniamo connessi e unisciti al mio fantastico elenco settimanale di newsletter web digest. Grazie per aver letto

Aphinya