Closure delle funzioni JavaScript | Spiegato
Il concetto di chiusure è in circolazione da un po 'di tempo ormai, ma le persone hanno difficoltà a capirlo. Esamineremo passo dopo passo e renderemo davvero facile capire con l'aiuto di esempi.
Quali sono le chiusure in Javascript
Molto brevemente, la chiusura ha accesso all'ambito esterno dall'ambito interno quando si lavora con le funzioni nidificate. Una chiusura viene creata ogni volta che una funzione nidificata viene eseguita in JavaScript. Le variabili definite all'interno della funzione vengono create sull'esecuzione della funzione e vengono rimosse dalla memoria al momento dell'esecuzione completa della rispettiva funzione.
Per comprendere il concetto di chiusure in JavaScript, dobbiamo conoscere la differenza tra l'ambito globale e l'ambito locale. Bene, andremo oltre brevemente di questi.
Scopi di variabile
Come accennato in precedenza, ci sono due importanti ambiti variabili in JavaScript:
- Portata globale
- Portata locale
Le variabili definite al di fuori di qualsiasi funzione sono note come variabili globali e avere un portata globale. Queste variabili possono essere accessibili da qualsiasi luogo all'interno del programma, ecco perché utilizziamo il termine "globale".
Comparativamente, le variabili definite all'interno di una funzione sono note come variabili locali e sono noti per avere un portata locale. L'ambito locale è ulteriormente diviso in ambito di funzione e ambito di blocco, ma questa non è una delle maggiori preoccupazioni per noi. Variabili locali è possibile accedere solo all'interno della funzione in cui sono dichiarati
Prendi questo blocco di codice per capire l'ambito:
var sitename = "linuxhint!";funzione printSiTename ()
Let TopicName = "JavaScript";
console.log (sitename);
printSitename ();
console.log (tegsName);
Quello che stiamo facendo nel codice sopra è che stiamo creando una variabile globale nome del sito e lo stiamo stampando all'interno di una funzione chiamata printSitename (), Questa funzione include una variabile locale nome argomento E stiamo cercando di stampare il valore di questa variabile al di fuori di questa funzione. Qui, nome del sito è una variabile globale e nome argomento è una variabile locale. L'output del seguente codice è come:
Come puoi vedere chiaramente, siamo stati in grado di accedere al nome del sito variabili all'interno di una funzione, ma non siamo stati in grado di accedere alla variabile locale nome argomento al di fuori della sua funzione. Puoi conoscere maggiori dettagli su queste diverse variabili e portata.
Come funziona una chiusura in JavaScript
Ora che sappiamo come funziona Scoping in JavaScript, possiamo facilmente comprendere il funzionamento delle chiusure.
Chiusure sono funzioni che sono nidificate l'una nell'altra in modo tale che la funzione interna venga ammessa localmente per la funzione esterna e la funzione esterna viene ammessa a livello globale per la funzione interna. Significa che la funzione interiore ha accesso agli attributi della funzione esterna.
Per una migliore comprensione, prendi il seguente codice:
funzione esterfunction ()let outvar = "I am estern";
funzione innerfunction ()
Lascia che invar = "I Am Inner";
console.log (outvar);
console.registro (invar);
restituire internirefunction ();
esterno ();
Stiamo creando un esterno e un interni dentro il esterno. Dalla funzione interna, stiamo accedendo alla variabile Outvar che è la variabile locale di esterno, e stampare il suo valore insieme al valore della variabile all'interno della funzione interna.
Ecco come funziona questo codice:
L'output del codice sopra è:
Siamo stati in grado di ottenere i valori di entrambe le variabili e stamparli alla console usando il console.tronco d'albero() funzione.
Come avere più funzioni all'interno di un'altra funzione in una chiusura
Se ci riferiamo alla funzione esterna come funzione genitore della chiusura e della funzione interiore come funzione figlio della chiusura. Quindi possiamo dirlo in questo modo che un genitore single possa avere più figli. Una funzione genitore non avrà accesso agli attributi dei suoi figli. Tuttavia, ogni bambino avrà accesso agli attributi del suo genitore. Poiché una funzione figlio è anche un attributo del genitore, quindi una funzione figlio può anche accedere alle altre funzioni figlio dello stesso genitore; Ciò significa avere accesso ai suoi fratelli.
Nota: Parametri e argomenti sono anche accessibili ai bambini.
Supponiamo che vogliamo fare una funzione che saluta una funzione che la chiama. Questa funzione ha 3 parametri, firstname, middlename e lastname.
Innanzitutto, crea la funzione utilizzando le seguenti righe.
function greeter (firstname, middlename, lastname)// comandi successivi dentro qui
Questa funzione di saluto è una funzione genitore con quattro figli. 3 dei bambini lavorano sui parametri e restituiscono il valore dei parametri come:
funzione getFirst ()restituire il primo nome;
funzione getMiddle ()
restituire middlename;
funzione getLast ()
restituire il lastname;
L'ultimo figlio, chiama tutti i suoi fratelli e stampa i valori sulla console, che è implementato con le seguenti righe:
Funzione NamePrinter ()console.Log ("Benvenuto! " + getFirst () +" " + getMiddle () +" " + getLast ());
Alla fine della funzione genitore Greeter () restituisce il NamePrinter () bambino nel luogo in cui si chiama.
A, eseguire tutto questo Chiusura Dobbiamo chiamare la funzione principale con la riga seguente:
Greeter ("John", "Bukhari", "Doe");Il frammento completo di codice di questa chiusura è:
function greeter (firstname, middlename, lastname)funzione getFirst ()
restituire il primo nome;
funzione getMiddle ()
restituire middlename;
funzione getLast ()
restituire il lastname;
Funzione NamePrinter ()
console.Log ("Benvenuto! " + getFirst () +" " + getMiddle () +" " + getLast ());
return nameprinter ();
Greeter ("John", "Bukhari", "Doe");
Otterremo il seguente output:
Conclusione
La chiusura è una caratteristica fornita con la versione ES6 di JavaScript. Le chiusure sono l'implementazione del concetto in base allo scoping delle variabili in JavaScript. Abbiamo imparato quali sono le chiusure e dal momento che si basano su scopare di variabili, abbiamo imparato anche sullo scoping. Abbiamo attraversato la differenza tra portata globale e portata variabile in JS e, alla fine, abbiamo testato il funzionamento delle chiusure con l'aiuto di esempi.