Hva er JavaScript-lukkinger og hvordan skriver du dem?

JavaScript er et av de vanskeligste programmeringsspråkene å mestre. Noen ganger er til og med seniorutviklere ikke i stand til å forutsi resultatet av koden de skrev. Et av de mer forvirrende konseptene i JavaScript er nedleggelser. Nybegynnere blir vanligvis snublet over konseptet – ikke bekymre deg. Denne artikkelen vil sakte lede deg gjennom de grunnleggende eksemplene for å hjelpe deg bedre å forstå nedleggelser. La oss komme i gang.

Hva er stenginger?

En lukking er en struktur av en funksjon og dens leksikalske miljø, inkludert eventuelle variabler i funksjonens omfang ved opprettelse av lukking. I enklere termer, vurder en ytre funksjon og en indre funksjon. Den indre funksjonen vil ha tilgang til omfanget av den ytre funksjonen.

Før du ser på noen eksempler på JavaScript-lukking, må du forstå leksikalsk omfang.

Hva er et leksikalsk miljø?

Det leksikalske miljøet er det lokale minnet sammen med dets foreldremiljø. Sjekk ut eksempelet nedenfor og gjett resultatet av følgende kode:

funksjon ytre(){ 

instagram viewer


 la a = 10;
 console.log (y);
 indre();
 funksjon indre(){
 console.log (a);
 console.log (y);
 }
}
la y = 9;
ytre();

Utgangen vil være 9, 10, 9. Den indre funksjonen har tilgang til variablene til den overordnede, den ytre() funksjon. Derav indre() funksjonen kan få tilgang til variabel a. De indre() funksjon kan også få tilgang variabel y på grunn av konseptet omfangskjede.

Forelderen til den ytre funksjonen er global, og forelderen til indre() funksjonen er ytre() funksjon. Derav indre() funksjonen har tilgang til variablene til foreldrene. Hvis du prøver å få tilgang til variabel en i det globale omfanget vil det vise en feil. Derfor kan du si at indre() funksjonen er leksikalsk inne i ytre() funksjon, og den leksikale forelderen til ytre() funksjonen er global.

JavaScript-lukkingseksempler forklart

Siden du har lært om det leksikalske miljøet, kan du enkelt gjette resultatet av følgende kode:

funksjon a(){
 la x = 10;
 funksjon b(){
 console.log (x);
 }
 b();
}
en();

Utgangen er 10. Selv om du kanskje ikke gjetter det ved første øyekast, er dette et eksempel på lukking i JavaScript. Nedleggelser er ikke annet enn en funksjon og deres leksikalske miljø.

La oss vurdere et eksempel der det er tre funksjoner nestet inne i hverandre:

funksjon a(){ 
 la x = 10;
 funksjon b(){ 
 funksjon c(){
 funksjon d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
en();

Vil det fortsatt kalles en nedleggelse? Svaret er: ja. Igjen er en lukking en funksjon med sin leksikale forelder. Funksjonens leksikalske forelder d() er c(), og på grunn av begrepet omfangskjede, funksjon d() har tilgang til alle variablene til de ytre funksjonene og de globale.

Ta en titt på et annet interessant eksempel:

funksjon x(){
 la a = 9;
 returner funksjon y(){
 console.log (a); 
 }
}
la b = x();

Du kan returnere en funksjon i en funksjon, tilordne en funksjon til en variabel og sende en funksjon i en funksjon i JavaScript. Dette er skjønnheten med språket. Kan du gjette hva resultatet blir hvis du skriver ut variabel b? Det vil skrive ut funksjon y(). Funksjonen x() returnerer en funksjon y(). Derav variabelen b lagrer en funksjon. Nå kan du gjette hva som vil skje hvis du kaller variabel b? Den skriver ut verdien av variabelen en: 9.

Du kan også oppnå dataskjuling ved å bruke stenginger. For en bedre forståelse, vurder et eksempel med en knapp som har en id kalt "knapp" i nettleseren. La oss legge ved en klikkhendelseslytter til den.

Nå må du beregne antall ganger knappen klikkes. Det er to måter å gjøre det på.

1. Opprett et globalt variabelantall og øk det ved å klikke. Men denne metoden har en feil. Det er enkelt å gjøre endringer i de globale variablene fordi de er lett tilgjengelige.

   Klikk på meg
   
   

2. Vi kan oppnå dataskjul ved å bruke stenginger. Du kan pakke inn hele addEventListener() funksjon inne i en funksjon. Det gjør en lukking. Og etter å ha opprettet en nedleggelse, kan du opprette en tellevariabel og øke verdien ved klikk. Ved å bruke denne metoden vil variabelen forbli i funksjonelt omfang, og ingen endring kan gjøres.

   Klikk på meg
   
   

I slekt: The Hidden Hero of Websites: Forstå DOM

Hvorfor er stenginger viktig?

Lukkinger er svært viktige ikke bare når det kommer til JavaScript, men også i andre programmeringsspråk. De er nyttige i mange scenarier der du blant annet kan lage variabler i deres private omfang eller kombinere funksjoner.

Tenk på dette eksemplet på funksjonssammensetning:

const multiplisere = (a, b) => a*b;
const multiplisereBy2 = x => multiplisere (10, x);
console.log (multiplyBy2(9));

Vi kan implementere det samme eksempelet ved å bruke nedleggelser:

const multiplisere = funksjon (a){
 returfunksjon (b){
 returnere a*b
 }
}
const multiplisereBy2 = multiplisere (2);
console.log (multiplyBy2(10))

Funksjoner kan bruke lukkinger i følgende scenarier:

1. For å implementere funksjonskuring
2. Skal brukes til å skjule data
3. Skal brukes med hendelseslyttere
4. Skal brukes i setTimeout-metoden()

Du bør ikke bruke lukkinger unødvendig

Det anbefales å unngå stenginger med mindre det virkelig er nødvendig, fordi de kan redusere ytelsen til appen din. Bruk av lukking vil koste mye minne, og hvis lukkingene ikke håndteres riktig kan det føre til minnelekkasjer.

Lukkede variabler frigjøres ikke av JavaScripts søppelsamler. Når du bruker variabler inne i lukninger, frigjøres ikke minnet av søppelsamleren fordi nettleseren føler at variablene fortsatt er i bruk. Derfor bruker disse variablene minne og reduserer ytelsen til appen.

Her er et eksempel som viser hvordan variabler inne i stenginger ikke blir samlet inn søppel.

 funksjon f(){
 const x = 3;
 returner funksjonen indre(){
 console.log (x);
 }
 }
 f()();

De variabel x her bruker minnet selv om det ikke brukes ofte. Søppelsamleren vil ikke kunne frigjøre dette minnet fordi det er inne i luken.

JavaScript er uendelig

Å mestre JavaScript er en uendelig oppgave, siden det er så mange konsepter og rammeverk som vanligvis ikke utforskes av erfarne utviklere selv. Du kan forbedre håndteringen av JavaScript betraktelig ved å lære det grunnleggende og praktisere dem ofte. Iteratorer og generatorer er noen av konseptene som intervjuer spør om under JavaScript-intervjuer.

En introduksjon til iteratorer og generatorer i JavaScript

Få taket på iterator- og generatormetoder i JS.

Les Neste

Om forfatteren