Esempio Di Chiusura Javascript

Michael Zippo 04.11.2021

Una delle più grandi parole d’ordine nel linguaggio JavaScript è chiusura. è oggetto di molte domande sui colloqui di lavoro presso le aziende FAANG. In questo articolo parleremo di chiusura e scopo, ne illustreremo i concetti con semplici esempi e poi concluderemo con una domanda campione tratta da un’intervista con uno dei più grandi giganti della tecnologia.

Quando qualcuno ti dice che qualcosa rientra o non rientra nell’ambito di un progetto, cosa significa?

Mi piacerebbe pensare a un periscopio o un telescopio quando penso alla risposta a questo. Questi strumenti ci mostrano ogni sorta di cose all’interno dei confini dell’obiettivo che ha: è nell’ambito. Se non rientra nell’ambito, non puoi vedere oltre il diametro dell’obiettivo. E illuminare qualcosa al di fuori del diametro non è possibile. Dovresti pensare a questo mentre parliamo di tre tipi di ambito molto importanti e distinti in JavaScript: locale, globale e lessicale.

Ambito locale

L’ambito locale è il più piccolo dei tre ambiti di cui parleremo oggi. Quando dichiariamo una funzione, qualsiasi cosa all’interno delle parentesi quadre ({}) è considerata locale alla funzione. Quando il motore JavaScript legge la funzione dichiarerà le variabili; quando termina distruggerà le variabili.

Come puoi vedere, quando "console.log()" l’esito della funzione di saluto invocata, siamo in grado di accedere al websiteName dopo che la funzione è stata eseguita. Questo ci dà il ‚ÄòHello Python.Engineering‚Äô stringa che stavamo cercando. Il console.log() della variabile che è stata dichiarata all’interno della funzione genera un errore perché non è definito.

Come già accennato, il motivo per cui websiteName non è definito è perché le variabili vengono create all’interno delle funzioni quando vengono invocate e quindi distrutte quando viene eseguita l’istruzione terminale. Qualsiasi cosa al di fuori della funzione non ha accesso a cose all’interno della funzione a meno che non abbia una configurazione speciale.

Ambito globale

Questo prossimo ambito è praticamente una traduzione letterale della frase. Un ambito globale prende gli elementi dichiarati al di fuori di una funzione e li riserva in uno spazio in cui tutti gli script, i metodi e le funzioni possono accedervi e utilizzarli per la loro logica.

Cosa fa il codice sopra se console.log() il contatore alla fine del codice? Cosa ti aspetti che accada?

Esaminiamo il codice:

Variabile contatore dichiarata e avviata nell’ambiente globale.
Funzione Add dichiarata nell’ambiente globale.
Viene invocato Add.
Variabile contatore dichiarata e avviata nell’ambiente locale.
Il contatore locale aumenta di 1 ‚áê perché locale e non globale?
Viene restituito il contatore. La funzione termina.
Viene richiamato nuovamente Add
Eseguite i passaggi 4 per 6.
Ripeti nuovamente i passaggi da 3 a 6.
console.log(counter); ‚áê Cosa viene restituito?

Poiché la funzione termina ogni volta che il contatore è a 1, la nostra variabile contatore locale viene dichiarata nuovamente e riavviata a 0 ogni volta che la funzione viene eseguita. Qualunque cosa accada, il contatore si fermerà sempre a 1 a livello locale.

Se una funzione trova una variabile nel suo ambito, non cerca nell’ambito globale per la variabile ‚Äì quindi la variabile globale non cambia mai. Quindi, il nostro console.log() genererà 0 poiché la nostra variabile definita più vicina all’interno dell’ambiente di quell’istruzione è nell’ambiente globale.

Ambito lessicale

L’ambito lessicale è uno dei concetti fondamentali in JavaScript. è l’idea che la creazione di una funzione o di una variabile sarà accessibile a determinate parti del codice e quindi inaccessibile ad altre parti del codice. Tutto dipende da dove si trova la dichiarazione di ogni variabile e funzione.

Diamo un’occhiata a questo blocco di codice:

Qui abbiamo un insieme di funzioni annidate. La funzione init() dichiara una variabile chiamata var1, dichiara una funzione chiamata second e invoca second().

Quando il compilatore passa attraverso questo codice per la prima volta, esamina ad alto livello ciò che abbiamo:

A questo punto, non possiamo vedere nient’altro all’interno del funzione init() - sappiamo solo che la funzione esiste. Quando viene invocata la nostra funzione init(), il compilatore dà un’altra occhiata ad alto livello a cosa c’è all’interno della funzione:

var1
second()funzione
richiama second()

La funzione init()non sa nulla di cosa sta succedendo all’interno del blocco second(). Può vedere solo cosa c’è nel suo lessicale ambiente ‚Äì lo stato circostante.

Ogni funzione nidificata si trova in un contenitore più piccolo, come un set di quelle matrioske russe nidificanti (vedi la parte superiore della pagina per esempio se sei non sono sicuro di cosa siano). Le bambole addosso sapere cosa sta succedendo all’interno del loro contenitore e cosa è già successo o dichiarato/letto nel genitore. La bambola più grande, ad esempio, sa solo che esiste la bambola successiva nel suo contenitore. Non sa di nessuna delle altre bambole nel set, solo cosa c’è nel suo ambiente lessicale (il suo stato) e cosa è già successo (l’ambito esterno).

In sostanza, sappiamo due cose:

L’ambito esterno non può vedere l’ambito interno.
L’ambito interno ha accesso all’ambito esterno.

Poiché l’esterno non può vedere cosa sta succedendo nell’ambito interno, possiamo tranquillamente dire che questa è una relazione a senso unico. L’interno può vedere e utilizzare le variabili dall’ambito esterno, ma l’esterno non può vedere l’interno. Questo è chiamato scopo lessicale.

La bellezza dell’ambito lessicale è che il valore di una variabile è determinato dal suo posizionamento in il codice. Le funzioni cercano prima il significato di una variabile all’interno del suo ambiente locale ‚Äì se non riesce a trovarlo, passa alla funzione che ha definito quella funzione. Se non riesce a trovarlo li, sale la catena alla funzione definita successiva.

Questo diventa un concetto molto importante in JavaScript che verrà fuori più e più volte man mano che imparerai di più su Framework JavaScript e come funzionano. Puoi tramandare dall’esterno, ma non puoi mai passare "su" nell’altra direzione. Questo è molto importante quando arriviamo all’argomento principale in questione: chiusura.

Chiusura

La definizione di chiusura è molto simile a quella di ambito lessicale. La differenza principale tra i due è che la chiusura è una funzione di ordine superiore e un ambito lessicale non lo è. Una funzione di ordine superiore ha una caratteristica di base: restituisce una funzione o utilizza una funzione come parametro.

La chiusura è una funzione che può accedere al suo ambito lessicale, anche quando quella funzione viene richiamata in seguito.

Sia la chiusura che l’ambito lessicale hanno le proprie variabili, possono accedere alle variabili e ai parametri di una funzione padre e possono utilizzare variabili globali. attraverso il seguente codice:

In questo codice, stiamo passando le informazioni nidificando le funzioni insieme in modo che sia possibile accedere all’ambito padre in un secondo momento.

Conclusione

In questo articolo abbiamo parlato di un argomento JavaScript piuttosto pesante: ambito e chiusure. Consiglierei di espandersi e leggere diversi articoli sull’argomento. Il modo in cui questo viene insegnato può provenire da una varietà di punti di vista ‚Äì il che significa, ovviamente, che ci sono molti modi per impararlo. Spero che questo primer ti sia stato utile! Buona fortuna nel continuare il tuo studio sulle chiusure!