JavaScript-sluitingen in loops begrijpen: praktische voorbeelden

Sluitingsproblemen in JavaScript-loops oplossen met let

JavaScript (ES6)

let funcs = [];
// Let's create 3 functions
for (let i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value:", i);
  };
}
for (let j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Zorgen voor correcte sluitingswaarden in asynchrone code

JavaScript (ES6)

const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (let i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

Correcte afsluiting bij gebeurtenislisteners met behulp van IIFE

JavaScript (ES6)

var buttons = document.getElementsByTagName("button");
// Let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  (function(i) {
    buttons[i].addEventListener("click", function() {
      // each should log its value.
      console.log("My value:", i);
    });
  })(i);
}

Correcte sluiting met voor...in en voor...van lussen

JavaScript (ES6)

const arr = [1, 2, 3];
const fns = [];
for (const i in arr) {
  fns.push(((i) => () => console.log("index:", i))(i));
}
for (const v of arr) {
  fns.push(((v) => () => console.log("value:", v))(v));
}
for (const n of arr) {
  const obj = { number: n };
  fns.push(((n, obj) => () => console.log("n:", n, "|", "obj:", JSON.stringify(obj)))(n, obj));
}
for (const f of fns) {
  f();
}

Veelgestelde vragen over JavaScript-sluitingen

1. Wat is een afsluiting in JavaScript?
2. Een afsluiting is een functie die toegang behoudt tot zijn lexicale bereik, zelfs als de functie buiten dat bereik wordt uitgevoerd.
3. Waarom vinden sluitingen plaats in lussen?
4. Sluitingen in lussen treden op omdat de lus functies creëert die dezelfde variabelereferentie vastleggen, wat tot onverwacht gedrag leidt als het niet correct wordt afgehandeld.
5. Hoe kunnen we sluitingsproblemen in lussen oplossen?
6. Gebruik makend van let in plaats van var in lussen of met behulp van IIFE (Immediately Invoked Function Expressions) kunnen afsluitingsproblemen oplossen door voor elke iteratie een nieuw bereik te maken.
7. Wat is een IIFE?
8. Een IIFE is een functie die onmiddellijk wordt uitgevoerd nadat deze is gemaakt, vaak gebruikt om een ​​nieuw bereik te creëren en variabele conflicten te vermijden.
9. Kunnen sluitingen worden gebruikt bij asynchrone programmering?
10. Ja, sluitingen zijn essentieel bij asynchrone programmering om de status en context bij asynchrone bewerkingen, zoals beloftes en callbacks, te behouden.
11. Wat is memoriseren en hoe kunnen sluitingen helpen?
12. Memoiseren is een optimalisatietechniek om de resultaten van dure functieaanroepen in het cachegeheugen op te slaan. Sluitingen helpen door de toegang tot de cache te behouden voor meerdere functieaanroepen.
13. Hoe kunnen sluitingen helpen bij de afhandeling van evenementen?
14. Sluitingen behouden de status van variabelen die nodig zijn voor gebeurtenishandlers, zodat ze correct functioneren wanneer de gebeurtenis wordt geactiveerd.
15. Wat is het modulepatroon in JavaScript?
16. Het modulepatroon maakt gebruik van afsluitingen om privévariabelen en -functies te creëren, waardoor functionaliteit wordt ingekapseld en mondiale reikwijdtevervuiling wordt vermeden.
17. Kunnen sluitingen privémethoden in JavaScript simuleren?
18. Ja, afsluitingen kunnen privémethoden simuleren door variabelen en functies alleen toegankelijk te houden binnen het bereik van de functie waar ze zijn gedefinieerd.

Laatste gedachten over JavaScript-sluitingen in loops

Het beheersen van afsluitingen in JavaScript, vooral binnen loops, is cruciaal voor het schrijven van voorspelbare en efficiënte code. Door te benutten let, Promises, En IIFEkunnen ontwikkelaars veelvoorkomende valkuilen vermijden en zorgen voor een correcte variabele scoping. Dit inzicht vergroot het vermogen om asynchrone taken en gebeurtenisgestuurde programmering af te handelen, wat uiteindelijk leidt tot robuustere applicaties.