Cosa sono le chiusure JavaScript e come le scrivi?

JavaScript è uno dei linguaggi di programmazione più difficili da padroneggiare. A volte anche gli sviluppatori senior non sono in grado di prevedere l'output del codice che hanno scritto. Uno dei concetti più confusi in JavaScript sono le chiusure. I principianti di solito inciampano nel concetto, non preoccuparti. Questo articolo ti guiderà lentamente attraverso gli esempi di base per aiutarti a comprendere meglio le chiusure. Iniziamo.

Cosa sono le chiusure?

Una chiusura è una struttura di una funzione e del suo ambiente lessicale, incluse tutte le variabili nell'ambito della funzione al momento della creazione della chiusura. In termini più semplici, considera una funzione esterna e una funzione interna. La funzione interna avrà accesso all'ambito della funzione esterna.

Prima di esaminare alcuni esempi di chiusura JavaScript, è necessario comprendere l'ambito lessicale.

Che cos'è un ambiente lessicale?

L'ambiente lessicale è la memoria locale insieme al suo ambiente padre. Dai un'occhiata all'esempio riportato di seguito e indovina l'output del seguente codice:

funzione esterna(){ 
 sia a = 10;
 console.log (y);
 interno();
 funzione interna(){
 console.log (a);
 console.log (y);
 }
}
sia y = 9;
esterno();

L'output sarà 9, 10, 9. La funzione interna ha accesso alle variabili del suo genitore, il esterno() funzione. Quindi il interno() la funzione può accedere variabile a. Il interno() la funzione può anche accedere variabile y a causa del concetto di catena dell'oscilloscopio.

Il genitore della funzione esterna è globale e il genitore di interno() la funzione è la esterno() funzione. Quindi il interno() la funzione ha accesso alle variabili dei suoi genitori. Se provi ad accedere alla variabile un nell'ambito globale, visualizzerà un errore. Quindi si può dire che interno() la funzione è lessicalmente all'interno del esterno() funzione, e il genitore lessicale di esterno() la funzione è globale.

Spiegazione degli esempi di chiusura JavaScript

Poiché hai imparato a conoscere l'ambiente lessicale, puoi facilmente indovinare l'output del seguente codice:

funzione a(){
 sia x = 10;
 funzione b(){
 console.log (x);
 }
 B();
}
un();

L'uscita è 10. Anche se a prima vista potresti non immaginarlo, questo è un esempio di chiusura in JavaScript. Le chiusure non sono altro che una funzione e il loro ambiente lessicale.

Consideriamo un esempio in cui ci sono tre funzioni nidificate l'una dentro l'altra:

funzione a(){ 
 sia x = 10;
 funzione b(){ 
 funzione c(){
 funzione d(){
 console.log (x);
 }
 D();
 }
 C();
 }
 B();
}
un();

Si chiamerà ancora chiusura? La risposta è si. Di nuovo, una chiusura è una funzione con il suo genitore lessicale. Il genitore lessicale della funzione D() è C(), e grazie al concetto di catena dell'ambito, funzione D() ha accesso a tutte le variabili delle funzioni esterne e di quelle globali.

Dai un'occhiata a un altro esempio interessante:

funzione x(){
 sia a = 9;
 funzione di ritorno y(){
 console.log (a); 
 }
}
sia b = x();

Puoi restituire una funzione all'interno di una funzione, assegnare una funzione a una variabile e passare una funzione all'interno di a funzione in JavaScript. Questa è la bellezza della lingua. Riesci a indovinare quale sarà l'output se stampi la variabile? B? Funzionerà di stampa y(). La funzione X() restituisce una funzione y(). Quindi, la variabile B memorizza una funzione. Ora, puoi indovinare cosa succederà se chiami variabile B? Stampa il valore della variabile un: 9.

Puoi anche ottenere l'occultamento dei dati usando le chiusure. Per una migliore comprensione, considera un esempio con un pulsante che ha un id denominato "pulsante" nel browser. Alleghiamo un listener di eventi click ad esso.

Ora è necessario calcolare il numero di volte in cui si fa clic sul pulsante. Ci sono due modi per farlo.

1. Crea un conteggio delle variabili globali e incrementalo al clic. Ma questo metodo ha un difetto. È facile apportare modifiche alle variabili globali perché sono facilmente accessibili.

   Cliccami
   
   

2. Possiamo ottenere l'occultamento dei dati utilizzando le chiusure. Puoi avvolgere l'intero addEventListener() funzione all'interno di una funzione. Fa una chiusura. E dopo aver creato una chiusura, puoi creare un conteggio variabile e incrementa il suo valore al clic. Usando questo metodo, la variabile rimarrà nel ambito funzionale, e non è possibile apportare modifiche.

   Cliccami
   
   

Imparentato: L'eroe nascosto dei siti web: Capire il DOM

Perché le chiusure sono importanti?

Le chiusure sono molto importanti non solo quando si tratta di JavaScript, ma anche in altri linguaggi di programmazione. Sono utili in molti scenari in cui è possibile creare variabili nel loro ambito privato o combinare funzioni, tra gli altri casi.

Considera questo esempio di composizione di funzioni:

const moltiplicare = (a, b) => a*b;
const moltiplicaBy2 = x => moltiplica (10, x);
console.log (multiplyBy2(9));

Possiamo implementare lo stesso esempio usando le chiusure:

const moltiplicare = funzione (a){
 funzione di ritorno (b){
 ritorna a*b
 }
}
const moltiplicaBy2 = moltiplica (2);
console.log (multiplyBy2(10))

Le funzioni possono utilizzare le chiusure nei seguenti scenari:

1. Per implementare la funzione currying
2. Da utilizzare per nascondere i dati
3. Da utilizzare con gli ascoltatori di eventi
4. Da utilizzare nel metodo setTimeout()

Non dovresti usare le chiusure inutilmente

Si consiglia di evitare chiusure a meno che non siano veramente necessarie perché possono ridurre le prestazioni della tua app. L'uso della chiusura costerà molta memoria e, se le chiusure non vengono gestite correttamente, potrebbe portare a perdite di memoria.

Le variabili chiuse su non verranno liberate dal garbage collector di JavaScript. Quando si utilizzano le variabili all'interno delle chiusure, la memoria non viene liberata dal garbage collector perché il browser ritiene che le variabili siano ancora in uso. Quindi, queste variabili consumano memoria e riducono le prestazioni dell'app.

Ecco un esempio che mostra come le variabili all'interno delle chiusure non verranno raccolte nella spazzatura.

 funzione f(){
 cost x = 3;
 funzione di ritorno inner(){
 console.log (x);
 }
 }
 F()();

Il variabile x qui consuma memoria anche se non è usata frequentemente. Il garbage collector non sarà in grado di liberare questa memoria perché è all'interno della chiusura.

JavaScript è infinito

La padronanza di JavaScript è un compito infinito, poiché ci sono così tanti concetti e framework che in genere non vengono esplorati dagli stessi sviluppatori esperti. Puoi migliorare significativamente la tua padronanza di JavaScript imparando le basi e praticandole frequentemente. Iteratori e generatori sono alcuni dei concetti che le interviste chiedono durante le interviste JavaScript.

Introduzione a iteratori e generatori in JavaScript

Impara a usare iteratori e generatori in JS.

Leggi Avanti

Circa l'autore