Guida per principianti alle chiusure JavaScript

"Chiusure"Sono tra i blocchi più fondamentali di JavaScript. Come principiante JavaScript, potresti aver utilizzato chiusure consapevolmente o inconsapevolmente; Tuttavia, raccogliere conoscenze sul funzionamento delle chiusure è cruciale in quanto consente di comprendere l'interazione tra variabili e funzioni e il processo di esecuzione del programma JavaScript.

Questo articolo è completo Guida per principianti A Chiusure JavaScript in cui discuteremo l'accesso variabile all'interno di diversi ambiti.

Prima di immergerti nel concetto di chiusure JavaScript, spiegheremo prima cosa Scoping lessicale è poiché entrambi i termini sono associati tra loro.

Scoping lessicale in JavaScript

L'ambito variabile è determinato dalla sua dichiarazione nel codice sorgente, noto come "Scoping lessicale". Ad esempio, nell'esempio seguente, il creato "nome"La variabile è un"globale"Variabile che significa che è possibile accedere da qualsiasi luogo del programma, come all'interno del"DisplayMessage ()" funzione.

Tuttavia, "informazioni" è un "Locale"Variabile a cui è possibile accedere solo all'interno del"DisplayMessage ()" funzione:

Sia name = 'Alex';
funzione displayMessage ()
lascia info = 'ciao! Mi chiamo';
console.log (info + " + nome);

displayMessage ();

L'esecuzione del codice di cui sopra mostrerà il seguente output:

Scoping lessicale nidificato in JavaScript

Gli ambiti delle variabili possono essere nidificati usando il "Scoping lessicale"In modo tale che la funzione interiore possa avere accesso alle variabili dichiarate nell'ambito esterno.

Considera il seguente esempio:

funzione displayMessage ()
lascia info = 'ciao! Mi chiamo Alex.';
funzione show ()
console.log (info);

spettacolo();

displayMessage ();

In questo esempio, il "DisplayMessage ()"La funzione ha una variabile locale denominata"informazioni"E un nidificato"spettacolo()"Funzione, dove"spettacolo()" è un interno funzione che ha la capacità di accedere al valore di "informazioni"Variabile da portata esterna.

Quindi, quando il "DisplayMessage ()"La funzione viene eseguita, chiamerà"spettacolo()"Funzione, che accede quindi al"informazioni"Variabile e visualizza il suo valore sulla console:

Ora modificheremo il "DisplayMessage ()"Metodo e invece di invocare l'interno"spettacolo()"Funzione, aggiungeremo una dichiarazione per restituire il"spettacolo()"Oggetto funzione:

funzione displayMessage ()
lascia info = 'ciao! Mi chiamo Alex.';
funzione show ()
console.log (info);

Spettacolo di ritorno;

Inoltre, abbiamo assegnato il valore restituito dal "DisplayMessage ()"Funzione a"X"Variabile:

let x = displayMessage ();

Infine, invoceremo "X()"Funzione che si riferisce al"spettacolo()" funzione:

console.log (x ());

Puoi vedere dall'output dato, il valore della variabile locale "informazioni"Esiste ancora che rimane generalmente nella memoria fino all'esecuzione della funzione in cui viene dichiarata:

Sembra confuso? Questa è la magia di Chiusura che hai visto nell'ultimo esempio come "spettacolo()"È una funzione di chiusura che mantiene l'ambito esterno nel proprio ambito.

Quali sono le chiusure JavaScript

Le funzioni JavaScript servono anche come "Chiusure"Perché il corpo di una funzione ha accesso alle variabili definite al di fuori di essa. Oppure possiamo definire "Chiusura"Come funzione che è una funzione figlio e può accedere alle variabili create all'interno del"genitore"Ambito da funzione.

Ora, diamo un'occhiata ad alcuni esempi per comprendere l'associazione tra le ampie variabili e la chiusura in JavaScript.

Esempio 1
Questo esempio dimostra come un "Locale"Variabile"informazioni"È possibile accedere all'interno del"spettacolo()"Funzione in cui viene creata. Ricorda, lo script rimanente non può accedervi "informazioni"Variabile:

funzione show ()
lascia info = 'ciao! Mi chiamo Alex.';
Informazioni di restituzione;

spettacolo();

Quando il "spettacolo()"La funzione viene eseguita, visualizzerà il valore memorizzato in"informazioni"Variabile:

Esempio 2
Ora dichiareremo "informazioni" come un "globale"Variabile che viene indicato nel"spettacolo()"Funzione (con ambito diverso):

lascia info = 'ciao! Mi chiamo Alex.';
funzione show ()
Informazioni di restituzione;

spettacolo();

Come funzione JavaScript "spettacolo()La funzione "è una"Chiusura", Manterrà la portata e lo stato del"informazioni"Variabile:

Esempio 3
In un'altra situazione, quando le variabili sono definite nell'ambito di "genitoreFunzione ", la"bambino"La funzione può ancora accedere al loro valore:

var displayMessage = function ()
lascia info = 'ciao! Mi chiamo Alex.';
var show = function ()
console.log (info);

spettacolo();

L'output del programma dato lo significa "spettacolo()"Che è una funzione figlio, può accedere al"informazioni"Variabile dichiarata in"DisplayMessage ()"Funzione genitore:

Queste erano tutte informazioni essenziali relative alle chiusure JavaScript. Puoi ulteriori ricerche in base alle tue esigenze.

Conclusione

Funzioni javascript Servi anche come Chiusure Perché il corpo di una funzione ha accesso alle variabili definite al di fuori di essa. Possiamo definire Chiusura Come funzione figlio in grado di accedere alle variabili create nell'ambito della funzione genitore. Questo articolo è completo Guida per principianti A Chiusure JavaScript in cui abbiamo discusso dell'accesso variabile all'interno di diversi ambiti.