Javascript closures uitgelegd – deel I

Geschreven door: op zondag 3 april 2016

Leestijd:

Toen ik een aantal jaar geleden voor het eerst las over het concept “Closures” snapte ik er nog weinig van. Veel artikelen op internet probeerde dit op allerlei moeilijk manieren om dit uit te leggen. In dit artikel proberen wij op een simpele manier uitleg te geven aan het principe “Closures”.  

Een simpel probleem

We beginnen met simpel probleem, wat eenvoudig opgelost kan worden met behulp van Closures.

Laten we als voorbeeld nemen dat je bepaalde events wilt tellen. Dit kan bijvoorbeeld gebruikt worden om te bepalen hoe vaak bepaalde code wordt uitgevoerd. Dit zou er als volgt uit kunnen zien:

javascript closures - 1

Bovenstaande code zou bijvoorbeeld elke keer als het is aangeroepen een bericht kunnen geven met: “Number of events: N”. Deze code zou er als volgt uit kunnen zien:

javascript closures 2

Bovenstaande voorbeeld is vrij simpel, maar als je twee waardes wilt bijhouden, dan kom je  al snel in de problemen. Je zou het op kunnen lossen door twee losse functies te schrijven voor beide waardes.

javascript closures 3

Maar bovenstaande voorbeeld bevat veel dubbele code die eenvoudig vervangen kan worden. Ook als er nog een andere waarde bij komt, dan heb je een nog grotere uitdaging.

Een closure gebruiken

Laten we bovenstaande voorbeeld gebruiken en hier een closure voor gaan gebruiken. De code zal er dan ongeveer als volgt uit komen te zien:

javascript closures 4

Bovenstaande code kun je dan als volgt gebruiken:

javascript closures 5

Dit ziet er allemaal ingewikkeld uit, maar dat is het niet. Laten we eerst de functie stap voor stap doorlopen.

  • Als eerste wordt er een lokale variable counter aangemaakt.
  • Als tweede wordt er een lokale functie aangemaakt met naam increment die de lokale variable counter kan verhogen. Dit ziet er misschien vreemd uit, maar in een functionele programmeertaal zoals JavaScript is dit heel normaal.

Zoals je misschien kunt zien, ziet het laatste voorbeeld er bijna hetzelfde uit als het allereerste voorbeeld. Alleen nu staat er om de functie een andere functie, of in het Engels: enclosed. Daarom ook de naam: closures.

Nu de lastigste stap:

  • Als laatste in de createCounter  functie wordt de lokale functie increment teruggeven. Dit zorgt ervoor dat de lokale functie wordt aangeroepen.

Dit alles betekend dat als de createCounter functie wordt aangeroepen, er een nieuwe instantie wordt gemaakt met elk een eigen counter. Elke variable die deze functie dus aanroept krijgt een eigen waarde van de lokale variable counter.

Closures verder uitgelegd

In de volgende delen gaan we het gebruik van closures nog verder uitleggen. Hierin laten we onder andere zien hoe de counters een naam kunt geven en hoe je extra functionaliteit kunt geven aan de closure.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail