Zrozumienie zamknięć JavaScript w pętlach: praktyczne przykłady

Rozwiązywanie problemów z zamykaniem w pętlach JavaScript za pomocą 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]();
}

Zapewnienie poprawnych wartości zamknięcia w kodzie asynchronicznym

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

Prawidłowe zamknięcie w detektorach zdarzeń przy użyciu 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);
}

Prawidłowe zamknięcie za pomocą pętli for...in i for...of

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

Często zadawane pytania dotyczące zamknięć JavaScript

1. Co to jest zamknięcie w JavaScript?
2. Zamknięcie to funkcja, która zachowuje dostęp do swojego zakresu leksykalnego, nawet jeśli funkcja jest wykonywana poza tym zakresem.
3. Dlaczego domknięcia występują w pętlach?
4. Zamknięcia pętli występują, ponieważ pętla tworzy funkcje, które przechwytują to samo odwołanie do zmiennej, co prowadzi do nieoczekiwanego zachowania, jeśli nie jest obsługiwane poprawnie.
5. Jak możemy rozwiązać problemy z zamknięciem w pętlach?
6. Za pomocą let zamiast var w pętlach lub używając IIFE (Natychmiast wywołane wyrażenia funkcyjne) mogą rozwiązać problemy z zamknięciem, tworząc nowy zakres dla każdej iteracji.
7. Co to jest IIFE?
8. Jakiś IIFE to funkcja wykonywana natychmiast po jej utworzeniu, często używana do utworzenia nowego zakresu i uniknięcia konfliktów zmiennych.
9. Czy domknięcia mogą być używane w programowaniu asynchronicznym?
10. Tak, domknięcia są niezbędne w programowaniu asynchronicznym, aby utrzymać stan i kontekst w operacjach asynchronicznych, takich jak obietnice i wywołania zwrotne.
11. Co to jest zapamiętywanie i jak pomagają zamknięcia?
12. Zapamiętywanie to technika optymalizacji polegająca na buforowaniu wyników kosztownych wywołań funkcji. Zamknięcia pomagają zachować dostęp do pamięci podręcznej podczas wielu wywołań funkcji.
13. W jaki sposób zamknięcia pomagają w obsłudze zdarzeń?
14. Zamknięcia zachowują stan zmiennych potrzebnych procedurom obsługi zdarzeń, zapewniając ich prawidłowe działanie po wyzwoleniu zdarzenia.
15. Jaki jest wzór modułu w JavaScript?
16. Wzorzec modułu wykorzystuje domknięcia do tworzenia prywatnych zmiennych i funkcji, hermetyzując funkcjonalność i unikając zanieczyszczenia zasięgu globalnego.
17. Czy zamknięcia mogą symulować metody prywatne w JavaScript?
18. Tak, domknięcia mogą symulować metody prywatne, utrzymując zmienne i funkcje dostępne tylko w zakresie funkcji, w której są zdefiniowane.

Ostatnie przemyślenia na temat zamknięć JavaScript w pętlach

Opanowanie domknięć w JavaScript, szczególnie w pętlach, jest kluczowe dla pisania przewidywalnego i wydajnego kodu. Poprzez wykorzystanie let, Promises, I IIFE, programiści mogą uniknąć typowych pułapek i zapewnić prawidłowe określanie zakresu zmiennych. To zrozumienie zwiększa zdolność do obsługi zadań asynchronicznych i programowania sterowanego zdarzeniami, co ostatecznie prowadzi do bardziej niezawodnych aplikacji.