Homepage » Tutorials » Javascript » Wat is een closure?

Wat is een closure?

Info 
Door: Franky Braem Moeilijkheidsgraad: 2/3
Geplaatst op: 26-05-2004Reacties: 0
Views: 6382 (gem. 2.7772 per week) Log in om zelf te reageren
 Waardering:4.5/10 (2 stemmen)

Een closure is een functie die onthoudt in welke context hij is gemaakt. Of beter uitgelegd: een closure is een inner functie die toegang heeft tot de lokale variabelen die op het moment
van het maken van de closure gekend zijn. Dit wil zeggen dat de variabelen nog altijd gekend zijn bij de uitvoering van de functie. Een voorbeeldje maakt dit duidelijk.

Stel dat je bij het laden van een pagina een berichtje wil tonen. Dat doe je zo:

#Code
1
<body onload="alert('welkom');">


Je kan het bovenstaande voorbeeld ook als volgt implementeren:

#Code
1
2
3
4
5
6
7
8
<!-- plaats dit in de head-tag -->
<script type="text/javascript">
function load()
{
      alert('welkom');
}
window.onload = load;
</script>


Later wil je nog iets toevoegen aan deze code, dus moet je weer het onload attribuut wijzigen. Of je moet de load functie aanpassen. Door een closure te gebruiken kan je er echter voor zorgen dat je meerdere functies kan uitvoeren tijdens het laden van je pagina. Eerst een stukje code:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- plaats dit in de head-tag -->
<script type="text/javascript">
function addLoadEvent(func) 
{
   var oldonload = window.onload;
   if (typeof window.onload != 'function') 
   {
      window.onload = func;
   }
   else 
   {
      window.onload = function() 
          {
            oldonload();
            func();
          }
   }
}                      

function bericht1()
{
    alert('Welkom');
}

function bericht2()
{
    alert('op onze website');
}

addLoadEvent(bericht1);
addLoadEvent(bericht2);
</script>

Deze code werkt omdat de closure (window.onload = function()), onthoudt wat er in oldonload stond toen het werd aangemaakt. De closure werd aangemaakt tijdens de uitvoering van addLoadEvent. De variabele oldonload bevat de vorige functie die toegekend werd aan onload. De closure wordt echter pas uitgevoerd bij het laden van de pagina.

Nog geen reacties

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Check je domein...


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be