Guida alla chiusura JavaScript

Introduzione

Le chiusure sono un concetto un po ‘astratto di linguaggio JavaScript e Sneak sul lato del compilatore della programmazione. Tuttavia, la comprensione del modo in cui JavaScript interpreta le funzioni, le funzioni annidate, le aree e gli ambienti lessicali √® essenziale per sfruttare il suo pieno potenziale.

In questo articolo, proveremo a demistificare tali concetti e fornire una semplice guida per il Chiusure JavaScript

Che cos’√® una chiusura?

Prima, guardiamo la definizione ufficiale di chiusura MDN:

una chiusura √® la combinazione di una funzione raggruppata ( bloccato) con i riferimenti al suo stato circostante (l’ambiente lessicale). In altre parole, una chiusura d√† accesso alla portata di una funzione esterna da una funzione interna.

In termini pi√Ļ semplici, una chiusura √® una funzione che ha accesso alla portata di una funzione esterna. Per capire questo, diamo un’occhiata a come le aree funzionino in JavaScript.

Scope in JavaScript

Scopo Determina quali variabili sono visibili o possono essere referenziate in un determinato contesto. Lo scopo è ampiamente diviso in due tipi: ambito globale e ambito locale:

  • Gamma globale – variabili definite al di fuori di una funzione. √ą possibile accedere alle variabili in questo campo e modificarle da qualsiasi parte del programma, quindi il nome “GLOBAL”.
  • Gamma locale – variabili definite all’interno di una funzione. Queste variabili sono specifiche per la funzione in quella che √® definito, quindi sono chiamati “locali”.

Diamo un’occhiata a una variabile globale e locale in JavaScript:

let name = "Joe";function hello(){ let message = "Hello"; console.log(message + " " +name);}

Nell’esempio precedente, lo scopo di name √® globale, cio√® puoi accedervi da qualsiasi luogo. D’altra parte, message √® definito all’interno di una funzione, il suo intervallo √® locale per hello() funzione.

JavaScript utilizza la portata lessicale quando si tratta di aree funzione. Il che significa che la gamma di una variabile √® definita dalla posizione della sua definizione nel codice sorgente. Ci√≤ consente di fare riferimento alle variabili globali all’interno di aree pi√Ļ piccole. Una variabile locale pu√≤ utilizzare una variabile globale, ma viceversa non √® possibile.

en

function outer(){ let x = 10; function inner() { let y = 20; console.log(x); } inner(); console.log(y)}outer();

Questo codice risulta:

10error: Uncaught ReferenceError: y is not defined

inner() Funzione pu√≤ fare riferimento a x come √® definito in outer() Funzione. Tuttavia, console.log(y) Dichiarazione in La funzione non pu√≤ fare riferimento a y Variabile Perch√© √® definito in inner() Intervallo di funzione “> .

In aggiunta, in questo scenario:

let x = 10;function func1(){ console.log(x);}function func2() { let x = 20; func1();}func2();

L’uscita sar√†:

10

quando chiamiamo func1() dall’interno func2(), abbiamo una variabile locale x. Tuttavia, questa variabile √® completamente irrilevante per func1() poich√© non √® accessibile in func1().

SO, func1() Verifica se c’√® una variabile globale con quell’identificatore disponibile e utilizzalo, il che si traduce nel valore di 10.

Chiusure sotto la cappa

Una chiusura è una funzione che ha accesso alle variabili dei tuoi genitori anche dopo la restituzione della funzione esterna. In altre parole, una chiusura ha tre aree:

  • gamma locale: accesso alle variabili a proprio reach
  • scope della funzione principale: accesso alle variabili all’interno del tuo principale
  • Global Reach: Accesso a variabili globali

Diamo un’occhiata a una chiusura al lavoro, effettiamo una funzione che restituisce un’altra funzione:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outer();console.log(multiplyByThree(2));

Questo risulta in:

6

Se facciamo un:

console.log(multiplyByThree);

Siamo ricevuti con:

function inner(y) { return x * y; }

Esaminiamo il codice passo dopo passo per vedere cosa sta succedendo sotto il cofano:

  • il outer() La funzione √® definita nell’ambito globale.
  • outer() √® invocato e restituisce una funzione assegnata a multiplyByThree.
  • viene creato un nuovo contesto di esecuzione per outer().
    • Variabile x √® impostato su 3.
  • Restituisce una funzione chiamata inner().
  • Il riferimento a inner() √® assegnato a multiplyByThree.
  • Quando la funzione esterna termina l’esecuzione, tutte le variabili vengono cancellate all’interno della portata.
  • Risultato della chiamata alla funzione √® registrato sulla console.
  • inner() √ą invocato con 2 come argomento. Quindi, y √® impostato su 2.
  • come inner() Conserva la catena di reazione della sua funzione principale, al momento dell’esecuzione avrai ancora accesso al valore di x.
  • ritorna 6 che viene registrato nella console.

In conclusione, anche dopo che la funzione esterna cessa di esistere, l’interno la funzione ha accesso alle variabili definite nel Scope dalla funzione esterna.

Visualizzazione delle chiusure

Le chiusure possono essere visualizzate attraverso la console dello sviluppatore:

function outer() { let x = 3 return function inner(y) { return x*y }}let multiplyByThree = outside();console.dir(multiplyByThree);

Quando si esegue il codice precedente nella console dello sviluppatore, possiamo vedere che abbiamo accesso al contesto di inner(y). Dopo un’ispezione pi√Ļ ravvicinata, possiamo vedere che parte del suo contesto √® un ] array, che contiene le tre aree di cui stavamo parlando.

E QUI, L’array dell’ambito contiene lo scopo della sua funzione principale, che contiene x = 3:

casi di uso comune

le chiusure sono utili perché loro Aiutaci ai dati di gruppo con funzioni che operano in tali dati. Questo potrebbe suonare alcuni di voi che hanno familiarità con la programmazione orientata agli oggetti (OOP). Di conseguenza, possiamo usare chiusure ovunque dove possiamo usare un oggetto.

Un altro caso di uso importante delle chiusure √® quando abbiamo bisogno delle nostre variabili per essere private, poich√© le variabili definite nell’ambito di una chiusura Sono fuori dai limiti delle funzioni al di fuori di esso. Allo stesso tempo, le chiusure hanno accesso alle variabili nella catena della gamma.

Vediamo il seguente esempio per capire questo meglio:

const balance = (function() { let privateBalance = 0; return { increment: function(value){ privateBalance += value; return privateBalance; }, decrement: function(value){ privateBalance -= value; return privateBalance; }, show: function(){ return privateBalance; } }})()console.log(balance.show()); // 0console.log(balance.increment(500)); // 500console.log(balance.decrement(200)); // 300

In questo esempio, abbiamo definito una variabile costante balance e configurandola come valore di ritorno della nostra funzione anonima. Realizza privateBalance può essere modificato solo chiamando i metodi in balance.

Conclusione

Sebbene le chiusure siano un concetto molto specializzato in JavaScript, sono uno strumento importante in una buona serie di strumenti per gli sviluppatori JavaScript. Possono essere utilizzati per implementare elegantemente soluzioni che altrimenti sarebbero un compito difficile.

In questo articolo, abbiamo imparato per la prima volta i campi e come sono implementati in JavaScript. Quindi usiamo questa conoscenza per capire come le chiusure funzionano sotto il cofano e come usarli.

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *