Wat zijn JavaScript-afsluitingen en hoe schrijft u ze?

JavaScript is een van de lastigste programmeertalen om onder de knie te krijgen. Soms zijn zelfs senior ontwikkelaars niet in staat om de uitvoer van de code die ze hebben geschreven te voorspellen. Een van de meer verwarrende concepten in JavaScript zijn sluitingen. Beginners struikelen meestal over het concept - maak je geen zorgen. Dit artikel leidt u langzaam door de basisvoorbeelden om u te helpen sluitingen beter te begrijpen. Laten we beginnen.

Wat zijn sluitingen?

Een sluiting is een structuur van een functie en zijn lexicale omgeving, inclusief alle variabelen in het bereik van de functie bij het maken van de sluiting. Overweeg in eenvoudiger bewoordingen een uiterlijke functie en een innerlijke functie. De innerlijke functie heeft toegang tot de reikwijdte van de uiterlijke functie.

Voordat u enkele voorbeelden van JavaScript-afsluitingen bekijkt, moet u de lexicale scoping begrijpen.

Wat is een lexicale omgeving?

De lexicale omgeving is het lokale geheugen samen met de bovenliggende omgeving. Bekijk het onderstaande voorbeeld en raad de uitvoer van de volgende code:

functie buitenste(){ 
 laat a = 10;
 console.log (y);
 binnen();
 functie inner(){
 console.log (a);
 console.log (y);
 }
}
laat y = 9;
buitenste();

De uitvoer zal zijn: 9, 10, 9. De innerlijke functie heeft toegang tot de variabelen van zijn ouder, de buitenste() functie. Vandaar dat de binnen() functie heeft toegang: variabele a. De binnen() functie heeft ook toegang variabele y vanwege het concept van de scope keten.

De ouder van de buitenste functie is globaal en de ouder van de binnen() functie is de buitenste() functie. Vandaar dat de binnen() functie heeft toegang tot de variabelen van zijn ouders. Als u probeert toegang te krijgen tot variabele een in het globale bereik, zal het een fout weergeven. Daarom kun je zeggen dat de binnen() functie is lexicaal binnen de buitenste() functie, en de lexicale ouder van de buitenste() functie is globaal.

Voorbeelden van JavaScript-afsluiting uitgelegd

Omdat je de lexicale omgeving hebt leren kennen, kun je gemakkelijk de uitvoer van de volgende code raden:

functie a(){
 laat x = 10;
 functie b(){
 console.log (x);
 }
 B();
}
een();

De uitvoer is: 10. Hoewel je het op het eerste gezicht misschien niet raadt, is dit een voorbeeld van afsluiting in JavaScript. Sluitingen zijn niets meer dan een functie en hun lexicale omgeving.

Laten we een voorbeeld bekijken waarin drie functies in elkaar genest zijn:

functie a(){ 
 laat x = 10;
 functie b(){ 
 functie c(){
 functie d(){
 console.log (x);
 }
 D();
 }
 C();
 }
 B();
}
een();

Wordt het nog een sluiting genoemd? Het antwoord is ja. Nogmaals, een sluiting is een functie met zijn lexicale ouder. De lexicale ouder van functie D() is C(), en vanwege het concept van de scope-keten, functie D() heeft toegang tot alle variabelen van de buitenste functies en de globale.

Bekijk nog een interessant voorbeeld:

functie x(){
 laat a = 9;
 retourfunctie y(){
 console.log (a); 
 }
}
laat b = x();

U kunt een functie binnen een functie retourneren, een functie aan een variabele toewijzen en een functie binnen a. doorgeven functie in JavaScript. Dit is het mooie van de taal. Kun je raden wat de uitvoer zal zijn als je variabele afdrukt? B? Het zal de functie afdrukken jij(). De functie x() geeft een functie terug jij(). Vandaar dat de variabele B slaat een functie op. Kun je nu raden wat er zal gebeuren als je variabele aanroept? B? Het drukt de waarde van variabele af een: 9.

U kunt ook gegevens verbergen met sluitingen. Overweeg voor een beter begrip een voorbeeld met een knop met een id met de naam "knop" in de browser. Laten we er een klikgebeurtenis-listener aan koppelen.

Nu moet u berekenen hoe vaak op de knop is geklikt. Er zijn twee manieren om dit te doen.

1. Maak een globale variabele telling en verhoog deze onclick. Maar deze methode heeft een fout. Het is gemakkelijk om wijzigingen aan te brengen in de globale variabelen omdat ze gemakkelijk toegankelijk zijn.

   Klik hier
   
   

2. We kunnen het verbergen van gegevens bereiken door gebruik te maken van sluitingen. Je kunt het geheel inpakken addEventListener() functie binnen een functie. Het maakt een afsluiting. En nadat u een sluiting heeft gemaakt, kunt u een tel variabele en verhoog de waarde ervan onclick. Door deze methode te gebruiken, blijft de variabele in de functionele reikwijdte:, en er kunnen geen wijzigingen worden aangebracht.

   Klik hier
   
   

Verwant: De verborgen held van websites: de DOM begrijpen

Waarom zijn sluitingen belangrijk?

Sluitingen zijn niet alleen erg belangrijk als het gaat om JavaScript, maar ook in andere programmeertalen. Ze zijn handig in veel scenario's waarin u onder andere variabelen in hun privébereik kunt maken of functies kunt combineren.

Beschouw dit voorbeeld van functiesamenstelling:

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

We kunnen hetzelfde voorbeeld implementeren met sluitingen:

const vermenigvuldigen = functie (a){
 retourfunctie (b){
 retourneer a*b
 }
}
const vermenigvuldigenBy2 = vermenigvuldigen (2);
console.log (vermenigvuldigenBy2(10))

Functies kunnen sluitingen gebruiken in de volgende scenario's:

1. Functie currying implementeren:
2. Te gebruiken voor het verbergen van gegevens
3. Te gebruiken met gebeurtenisluisteraars
4. Te gebruiken in de setTimeout-methode()

U mag sluitingen niet onnodig gebruiken

Het wordt aanbevolen om sluitingen te vermijden, tenzij dit echt nodig is, omdat ze de prestaties van uw app kunnen verminderen. Het gebruik van sluiting kost veel geheugen en als de sluitingen niet correct worden afgehandeld, kan dit leiden tot: geheugenlekken.

Gesloten over variabelen worden niet vrijgemaakt door de afvalverzamelaar van JavaScript. Als je variabelen binnen sluitingen gebruikt, wordt het geheugen niet vrijgemaakt door de vuilnisman, omdat de browser denkt dat de variabelen nog steeds in gebruik zijn. Daarom verbruiken deze variabelen geheugen en verlagen ze de prestaties van de app.

Hier is een voorbeeld dat laat zien hoe variabelen binnen sluitingen niet als afval worden verzameld.

 functie f(){
 const x = 3;
 retourfunctie inner(){
 console.log (x);
 }
 }
 F()();

De variabele x hier verbruikt geheugen, ook al wordt het niet vaak gebruikt. De vuilnisman kan dit geheugen niet vrijmaken omdat het zich in de sluiting bevindt.

JavaScript is eindeloos

Het beheersen van JavaScript is een eindeloze taak, omdat er zoveel concepten en frameworks zijn die doorgaans niet door ervaren ontwikkelaars zelf worden onderzocht. U kunt uw beheersing van JavaScript aanzienlijk verbeteren door de basis te leren en deze regelmatig te oefenen. Iterators en generatoren zijn enkele van de concepten die interviews vragen tijdens JavaScript-interviews.

Een inleiding tot iterators en generatoren in JavaScript

Leer iterator- en generatormethoden in JS onder de knie.

Lees volgende

Over de auteur