Förstå JavaScript-förslutningar i loopar: praktiska exempel

Lösning av stängningsproblem i JavaScript-loopar med 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]();
}

Säkerställande av korrekta stängningsvärden i asynkron kod

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));
}

Korrekt stängning av händelseavlyssnare som använder 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);
}

Korrekt stängning med för...in och för...slingor

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();
}

Vanliga frågor om JavaScript-stängningar

1. Vad är en stängning i JavaScript?
2. En stängning är en funktion som behåller tillgången till sitt lexikaliska omfång, även när funktionen exekveras utanför det omfånget.
3. Varför sker stängningar i slingor?
4. Stängningar i loopar uppstår eftersom loopen skapar funktioner som fångar samma variabelreferens, vilket leder till oväntat beteende om det inte hanteras korrekt.
5. Hur kan vi åtgärda stängningsproblem i loopar?
6. Använder sig av let istället för var i slingor eller med hjälp av IIFE (Omedelbart anropade funktionsuttryck) kan fixa stängningsproblem genom att skapa ett nytt omfång för varje iteration.
7. Vad är en IIFE?
8. En IIFE är en funktion som exekveras direkt efter att den har skapats, ofta används för att skapa ett nytt omfång och undvika variabla konflikter.
9. Kan stängningar användas i asynkron programmering?
10. Ja, stängningar är viktiga i asynkron programmering för att upprätthålla tillståndet och sammanhanget över asynkrona operationer som löften och återuppringningar.
11. Vad är memoisering och hur hjälper nedläggningar?
12. Memoisering är en optimeringsteknik för att cachelagra resultaten av dyra funktionsanrop. Stängningar hjälper genom att behålla åtkomsten till cachen över flera funktionsanrop.
13. Hur hjälper stängningar vid hantering av evenemang?
14. Stängningar behåller tillståndet för variabler som behövs av händelsehanterare, vilket säkerställer att de fungerar korrekt när händelsen utlöses.
15. Vad är modulmönstret i JavaScript?
16. Modulmönstret använder stängningar för att skapa privata variabler och funktioner, kapsla in funktionalitet och undvika globala föroreningar.
17. Kan stängningar simulera privata metoder i JavaScript?
18. Ja, stängningar kan simulera privata metoder genom att hålla variabler och funktioner tillgängliga endast inom funktionens räckvidd där de är definierade.

Slutliga tankar om JavaScript-stängningar i loopar

Att bemästra stängningar i JavaScript, särskilt inom loopar, är avgörande för att skriva förutsägbar och effektiv kod. Genom att utnyttja let, Promises, och IIFE, kan utvecklare undvika vanliga fallgropar och säkerställa korrekt variabel omfattning. Denna förståelse förbättrar förmågan att hantera asynkrona uppgifter och händelsedriven programmering, vilket i slutändan leder till mer robusta applikationer.