Javascript closures

Closures in JavaScript zijn functies met ‘vrije variabelen’. De functie onthoud zijn omgeving waarin hij gemaakt is.

Je kunt een closure gebruiken om dynamische functies te maken. Wat voorbeelden zullen helpen om het geheel te begrijpen.

In onderstaand voorbeeld maken we een functie welke machten uitrekent. De functie ‘powers’ geeft een functie terug. Alle instanties van dat object (onthoud dat alle functies objecten zijn in JS) zullen dus functies zijn.

function powers( power ){
  return function( baseNumber){

    var result = baseNumber;
    for( var i = 1; i < power; i++){
      result = baseNumber * result;
    }

    return result;
  }
}

var squared = powers(2);
var power3 = powers(3);

squared(2); // 4
squared(6); // 36
power3(3); // 27
power3(5); // 125

Zoals je ziet zijn alle instanties van het object ‘powers’ (onthoud dat functies in JS altijd een object zijn) een functie. Dat komt doordat de functie powers een functie teruggeeft.
Wat dit nu tot een closure maakt, is dat de teruggegeven functie gebruik maakt van de variable power, terwijl deze variable _eigenlijk_ buiten de scope van de teruggegeven functie ligt. Want als we ‘squared(4)’ uitvoeren, hoe weet de functie squared dan dat variabele ‘power’ dan de waarde 2 heeft? Dat is dus de kracht van de closure; bij het instantieëren van de functie worden de variabelen in de omgeving vastgelegd in de teruggegeven functie.

Nog een voorbeeld waarin we een functie maken waarmee je tekst op je site van font-size kunt veranderen.

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

size12, size14 en size16 zijn nu functies welke op HTML elementen uitgevoerd kunnen worden en daar de font-size van de tekst in die elementen zullen veranderen naar respectievelijk 12, 14 en 16 pixels.

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

bron: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures