Hvad er JavaScript-lukninger, og hvordan skriver du dem?

JavaScript er et af de sværeste programmeringssprog at mestre. Nogle gange er selv seniorudviklere ikke i stand til at forudsige outputtet af den kode, de skrev. Et af de mere forvirrende begreber i JavaScript er lukninger. Begyndere bliver normalt snublet over konceptet - bare rolig. Denne artikel vil langsomt føre dig gennem de grundlæggende eksempler for at hjælpe dig med bedre at forstå lukninger. Lad os komme igang.

Hvad er lukninger?

En lukning er en struktur af en funktion og dens leksikalske miljø, inklusive eventuelle variabler i funktionens omfang ved oprettelse af lukning. I enklere termer, overvej en ydre funktion og en indre funktion. Den indre funktion vil have adgang til omfanget af den ydre funktion.

Før du ser på nogle JavaScript-lukningseksempler, skal du forstå leksikalsk omfang.

Hvad er et leksikalsk miljø?

Det leksikalske miljø er den lokale hukommelse sammen med dets forældremiljø. Tjek eksemplet nedenfor og gæt resultatet af følgende kode:

function outer(){ 
 lad a = 10;





instagram viewer


 console.log (y);
 indre();
 function indre(){
 console.log (a);
 console.log (y);
 }
}
lad y = 9;
ydre();

Udgangen bliver 9, 10, 9. Den indre funktion har adgang til variablerne for sin forælder, den ydre() fungere. Derfor er indre() funktion kan få adgang til variabel a. Det indre() funktion kan også få adgang variabel y på grund af konceptet omfangskæde.

Forælderen til den ydre funktion er global, og forælderen til indre() funktionen er ydre() fungere. Derfor er indre() funktion har adgang til sine forældres variabler. Hvis du prøver at få adgang til variabel -en i det globale omfang vil det vise en fejl. Derfor kan man sige, at indre() funktion er leksikalsk inde i ydre() funktion, og den leksikale forælder til ydre() funktionen er global.

Eksempler på JavaScript-lukning forklaret

Da du har lært om det leksikalske miljø, kan du nemt gætte outputtet af følgende kode:

funktion a(){
 lad x = 10;
 funktion b(){
 console.log (x);
 }
 b();
}
en();

Udgangen er 10. Selvom du måske ikke gætter det ved første øjekast, er dette et eksempel på lukning i JavaScript. Lukninger er intet andet end en funktion og deres leksikalske miljø.

Lad os overveje et eksempel, hvor der er tre funktioner indlejret i hinanden:

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

Vil det stadig blive kaldt en lukning? Svaret er: ja. Igen er en lukning en funktion med dens leksikale forælder. Funktionens leksikalske forælder d() er c(), og på grund af begrebet scope chain, funktion d() har adgang til alle variablerne for de ydre funktioner og de globale.

Tag et kig på et andet interessant eksempel:

funktion x(){
 lad a = 9;
 returner funktion y(){
 console.log (a); 
 }
}
lad b = x();

Du kan returnere en funktion i en funktion, tildele en funktion til en variabel og sende en funktion inde i en funktion i JavaScript. Dette er skønheden ved sproget. Kan du gætte, hvad outputtet bliver, hvis du udskriver variabel b? Det vil udskrive funktion y(). Funktionen x() returnerer en funktion y(). Derfor variablen b gemmer en funktion. Kan du nu gætte, hvad der vil ske, hvis du kalder variabel b? Det udskriver værdien af ​​variabel -en: 9.

Du kan også opnå dataskjul ved hjælp af lukninger. For en bedre forståelse kan du overveje et eksempel med en knap, der har et id ved navn "knap" på browseren. Lad os vedhæfte en klikbegivenhedslytter til den.

Nu skal du beregne antallet af gange, der trykkes på knappen. Der er to måder at gøre det på.

1. Opret et globalt variabelantal, og forøg det ved klik. Men denne metode har en fejl. Det er nemt at foretage ændringer i de globale variabler, fordi de er let tilgængelige.

   Klik på mig
   
   

2. Vi kan opnå dataskjul ved at bruge lukninger. Du kan pakke det hele ind addEventListener() funktion inde i en funktion. Det laver en lukning. Og efter at have oprettet en lukning, kan du oprette en tælle variabel og øg dens værdi ved et klik. Ved at bruge denne metode forbliver variablen i funktionelt omfang, og der kan ikke foretages ændringer.

   Klik på mig
   
   

Relaterede: The Hidden Hero of Websites: Understanding the DOM

Hvorfor er lukninger vigtige?

Lukninger er meget vigtige, ikke kun når det kommer til JavaScript, men også i andre programmeringssprog. De er nyttige i mange scenarier, hvor du blandt andet kan oprette variabler i deres private omfang eller kombinere funktioner.

Overvej dette eksempel på funktionssammensætning:

const gange = (a, b) => a*b;
const multiplicerBy2 = x => multiplicer (10, x);
console.log (multiplyBy2(9));

Vi kan implementere det samme eksempel ved at bruge lukninger:

const gange = funktion (a){
 returner funktion (b){
 returnere a*b
 }
}
const multiplicerBy2 = multiplicer (2);
console.log (multiplyBy2(10))

Funktioner kan bruge lukninger i følgende scenarier:

1. At implementere funktionskuring
2. Skal bruges til at skjule data
3. Skal bruges sammen med begivenhedslyttere
4. Skal bruges i setTimeout-metoden()

Du bør ikke bruge lukninger unødigt

Det anbefales at undgå lukninger, medmindre det virkelig er nødvendigt, fordi de kan reducere din app's ydeevne. Brug af lukning vil koste meget hukommelse, og hvis lukningerne ikke håndteres korrekt, kan det føre til hukommelseslækager.

Lukket over variabler frigives ikke af JavaScripts skraldeopsamler. Når du bruger variabler inde i lukninger, frigøres hukommelsen ikke af skraldeopsamleren, fordi browseren føler, at variablerne stadig er i brug. Derfor bruger disse variabler hukommelse og nedsætter appens ydeevne.

Her er et eksempel, der viser, hvordan variabler inde i lukninger ikke bliver indsamlet affald.

 funktion f(){
 const x = 3;
 returner funktionen indre(){
 console.log (x);
 }
 }
 f()();

Det variabel x her bruger hukommelsen, selvom den ikke bruges ofte. Skraldeopsamleren vil ikke være i stand til at frigøre denne hukommelse, fordi den er inde i lukningen.

JavaScript er uendeligt

At mestre JavaScript er en uendelig opgave, da der er så mange koncepter og rammer, som ikke typisk udforskes af erfarne udviklere selv. Du kan forbedre dit greb om JavaScript væsentligt ved at lære det grundlæggende og øve dem ofte. Iteratorer og generatorer er nogle af de begreber, som interviews spørger om under JavaScript-interviews.

En introduktion til iteratorer og generatorer i JavaScript

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

Læs Næste

Om forfatteren