Vad är JavaScript-stängningar och hur skriver du dem?

JavaScript är ett av de svåraste programmeringsspråken att behärska. Ibland kan inte ens seniora utvecklare förutsäga resultatet av koden de skrev. Ett av de mer förvirrande begreppen i JavaScript är stängningar. Nybörjare blir vanligtvis snubblade över konceptet – oroa dig inte. Den här artikeln kommer långsamt att leda dig genom de grundläggande exemplen för att hjälpa dig att bättre förstå nedläggningar. Låt oss börja.

Vad är stängningar?

En stängning är en struktur av en funktion och dess lexikaliska miljö, inklusive eventuella variabler i funktionens omfattning vid skapandet av stängningen. I enklare termer, överväga en yttre funktion och en inre funktion. Den inre funktionen kommer att ha tillgång till omfattningen av den yttre funktionen.

Innan du tittar på några exempel på JavaScript-avslutning måste du förstå lexikal omfattning.

Vad är en lexikal miljö?

Den lexikala miljön är det lokala minnet tillsammans med dess föräldramiljö. Kolla in exemplet nedan och gissa resultatet av följande kod:

function outer(){ 
 låt a = 10;
 console.log (y);
 inre();
 function inner(){
 console.log (a);
 console.log (y);
 }
}
låt y = 9;
yttre();

Utgången blir 9, 10, 9. Den inre funktionen har tillgång till variablerna för sin förälder, den yttre() fungera. Därav inre() funktionen kan komma åt variabel a. De inre() funktion kan också komma åt variabel y på grund av begreppet omfattningskedja.

Föräldern till den yttre funktionen är global och föräldern till inre() funktionen är yttre() fungera. Därav inre() funktion har tillgång till sina föräldrars variabler. Om du försöker komma åt variabel a i det globala omfånget kommer det att visa ett fel. Därför kan man säga att inre() funktion är lexikalt inuti yttre() funktion och den lexikala föräldern till yttre() funktionen är global.

Exempel på JavaScript-stängning förklaras

Eftersom du har lärt dig om den lexikaliska miljön kan du enkelt gissa resultatet av följande kod:

funktion a(){
 låt x = 10;
 funktion b(){
 console.log (x);
 }
 b();
}
a();

Utgången är 10. Även om du kanske inte gissar det vid första anblicken, är detta ett exempel på stängning i JavaScript. Stängningar är inget annat än en funktion och deras lexikala miljö.

Låt oss överväga ett exempel där det finns tre funktioner kapslade inuti varandra:

funktion a(){ 
 låt x = 10;
 funktion b(){ 
 funktion c(){
 funktion d(){
 console.log (x);
 }
 d();
 }
 c();
 }
 b();
}
a();

Kommer det fortfarande att kallas stängning? Svaret är ja. Återigen är en stängning en funktion med sin lexikala förälder. Funktionens lexikala förälder d() är c(), och på grund av begreppet omfattningskedja, funktion d() har tillgång till alla variabler för de yttre funktionerna och de globala.

Ta en titt på ett annat intressant exempel:

funktion x(){
 låt a = 9;
 returnera funktionen y(){
 console.log (a); 
 }
}
låt b = x();

Du kan returnera en funktion inuti en funktion, tilldela en funktion till en variabel och skicka en funktion inuti en funktion i JavaScript. Detta är skönheten med språket. Kan du gissa vad resultatet blir om du skriver ut variabel b? Det kommer att skriva ut funktion y(). Funktionen x() returnerar en funktion y(). Därav variabeln b lagrar en funktion. Kan du nu gissa vad som händer om du anropar variabel b? Den skriver ut värdet på variabeln a: 9.

Du kan också uppnå datadöljning genom att stänga. För en bättre förståelse, överväg ett exempel med en knapp som har ett ID som heter "knapp" i webbläsaren. Låt oss bifoga en klickhändelselyssnare till den.

Nu måste du räkna ut hur många gånger du klickar på knappen. Det finns två sätt att göra det på.

1. Skapa ett globalt variabelantal och öka det vid klick. Men den här metoden har ett fel. Det är lätt att göra ändringar i de globala variablerna eftersom de är lättillgängliga.

   Klicka här
   
   

2. Vi kan uppnå datadöljning genom att använda stängningar. Du kan slå in hela addEventListener() funktion inuti en funktion. Det gör en stängning. Och efter att ha skapat en stängning kan du skapa en räknevariabel och öka dess värde vid klick. Genom att använda denna metod kommer variabeln att förbli i funktionell omfattning, och inga ändringar kan göras.

   Klicka här
   
   

Relaterad: The Hidden Hero of Websites: Understanding the DOM

Varför är stängningar viktiga?

Stängningar är mycket viktiga inte bara när det kommer till JavaScript, utan även i andra programmeringsspråk. De är användbara i många scenarier där du bland annat kan skapa variabler i deras privata omfattning eller kombinera funktioner.

Betrakta detta exempel på funktionssammansättning:

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

Vi kan implementera samma exempel genom att använda stängningar:

const multiplicera = funktion (a){
 returnera funktion (b){
 återvända a*b
 }
}
const multipliceraBy2 = multiplicera (2);
console.log (multiplyBy2(10))

Funktioner kan använda stängningar i följande scenarier:

1. Att implementera funktionscurrying
2. Används för att dölja data
3. För att användas med evenemangslyssnare
4. Ska användas i setTimeout-metoden()

Du bör inte använda förslutningar i onödan

Det rekommenderas att undvika stängningar såvida de inte verkligen behövs eftersom de kan försämra prestandan för din app. Att använda stängning kommer att kosta mycket minne, och om stängningarna inte hanteras på rätt sätt kan det leda till minnesläckor.

Stängda över variabler kommer inte att frigöras av JavaScripts skräpsamlare. När du använder variabler i stängningar frigörs inte minnet av sopsamlaren eftersom webbläsaren känner att variablerna fortfarande används. Därför förbrukar dessa variabler minne och försämrar appens prestanda.

Här är ett exempel som visar hur variabler inuti stängningar inte kommer att samlas in som skräp.

 funktion f(){
 const x = 3;
 returnera funktionen inner(){
 console.log (x);
 }
 }
 f()();

De variabel x här förbrukar minne även om det inte används ofta. Sophämtaren kommer inte att kunna frigöra detta minne eftersom det är inne i förslutningen.

JavaScript är oändligt

Att bemästra JavaScript är en oändlig uppgift, eftersom det finns så många koncept och ramverk som vanligtvis inte utforskas av erfarna utvecklare själva. Du kan förbättra ditt grepp om JavaScript avsevärt genom att lära dig grunderna och öva dem ofta. Iteratorer och generatorer är några av de begrepp som intervjuer frågar efter under JavaScript-intervjuer.

En introduktion till iteratorer och generatorer i JavaScript

Få kläm på iterator- och generatormetoder i JS.

Läs Nästa

Om författaren