Closure - Txai-HvA/BlokTech GitHub Wiki

Closure is de combinatie van een functie gebundeld met verwijzingen naar de omringende state (de lexical environment). Met andere woorden, een closure geeft je toegang tot de outer functions scope vanuit een inner function. In JavaScript worden closures gemaakt elke keer dat een functie wordt gemaakt (MDN, 2021).

Lexical scoping

function init() {
  var name = 'Txai'; // name is een local variabel gecreëerd door init
  function displayName() { // displayName() is een inner function, een closure
    alert(name); // Gebruik variabel gedeclareerd in de parent function
  }
  displayName();
}
init();

Dit is een voorbeeld van lexical scoping, die beschrijft hoe een parser variabel namen oplost wanneer functies genest zijn. init() creëert een local variable genaamd name en een functie genaamd displayName(). De displayName() functie is een inner function die is gedefineerd in init() en is alleen beschikbaar in de body van de init() functie. De displayName() function heeft geen eigen local variables, maar displayName() heeft toegang tot de variabel name gedeclareeerd in de parent function, init(). Als je de code runt, valt op dat de alert() statement in de displayName() function de value van name weergeeft, die gedeclareerd is in zijn parent function. Lexical verwijst naar het feit dat lexical scoping gebruik maakt van de locatie van de variabel die is gedeclareerd in de source code om te bepalen waar de variabel beschikbaar is. Nested functions hebben toegang tot variabelen gedeclareerd in hun outer scope (MDN, 2021).

Closure

function makeFunc() {
  var name = 'Txai';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

Deze code heeft exact hetzelfde effect als de code daar boven. Het verschil is is dat de displayName() inner function wordt teruggeven door de outer function voor dat het wordt uitgevoerd (MDN, 2021).

De reden dat dit nog steeds werkt is dat functies in JavaScript closures vormen. Een closure is een combinatie van een function en de lexical environment waarin die functie werd gedeclareerd. Deze environment bestaat uit alle local variabelen die binnen het bereik vielen op het moment dat de closure werd gemaakt (MDN, 2021).

In dit geval is myFunc een verwijzing naar de instance van de functie displayName die is gecreëerd wanneer makeFunc word uitgevoerd. De instance van displayName behoud een verwijzing naar zijn lexical environment, waarbinnen de variabel name bestaat. Om deze reden blijft, wanneer myFunc wordt aangeroepen, de variabel name beschikbaar voor gebruik, en wordt "Txai" doorgegeven voor de alert (MDN, 2021).

Bronnen