JavaScript Academy · Lekcja

Jak domknięcia przechwytują stan

Proszę zrozumieć środowisko leksykalne domknięć.

Jak domknięcia przechwytują stan to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Czym jest domknięcie

Domknięcie to funkcja połączona z referencjami do zmiennych z zakresu, w którym została zdefiniowana. Funkcja wewnętrzna „zapamiętuje” te zmienne nawet po zakończeniu działania funkcji zewnętrznej.

function outer() {
  const message = "hello";
  function inner() {
    console.log(message); // sees outer variable
  }
  inner();
}
outer(); // "hello"

Zwracanie funkcji wewnętrznej

Mechanizm ten ujawnia się, gdy zostanie zwrócona funkcja wewnętrzna. Zachowuje ona dostęp do zmiennej zewnętrznej, mimo że działanie funkcji outer już się zakończyło.

function outer() {
  const message = "remembered";
  return function () {
    console.log(message);
  };
}
const fn = outer();
fn(); // "remembered"

Zakres leksykalny

Domknięcia działają dzięki zakresowi leksykalnemu: funkcja może uzyskiwać dostęp do zmiennych zdefiniowanych w zakresach, które fizycznie ją otaczają w kodzie źródłowym, a nie w miejscu jej wywołania.

const x = 10;
function show() {
  console.log(x); // resolves where defined
}
function run() {
  const x = 99;
  show(); // still logs 10, not 99
}
run();

Przechwytywanie przez referencję

Domknięcie przechwytuje samą zmienną, a nie migawkę jej wartości. Jeśli zmienna zmieni się później, domknięcie zobaczy nową wartość.

function make() {
  let count = 0;
  const get = () => count;
  count = 5; // changed after get defined
  return get;
}
console.log(make()()); // 5

Każde wywołanie tworzy nowy zakres

Każde wywołanie funkcji zewnętrznej tworzy nowy zestaw zmiennych. Domknięcia pochodzące z różnych wywołań nie współdzielą stanu.

function counter() {
  let n = 0;
  return () => ++n;
}
const a = counter();
const b = counter();
console.log(a(), a()); // 1 2
console.log(b());      // 1 (independent)

Domknięcia przechwytujące parametry

Przechwytywane są także parametry funkcji. Dzięki temu mogą Państwo tworzyć wyspecjalizowane funkcje na podstawie funkcji ogólnej.

function adder(x) {
  return (y) => x + y;
}
const add5 = adder(5);
console.log(add5(3));  // 8
console.log(add5(10)); // 15

Klasyczna pułapka pętli

Słynny błąd: użycie var w pętli sprawia, że wszystkie domknięcia współdzielą jedną zmienną. Zanim zostaną wykonane, pętla już się zakończy, więc wszystkie zobaczą wartość końcową.

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 3 3 3

Naprawa za pomocą let

let tworzy nowe powiązanie w każdej iteracji, więc każde domknięcie przechwytuje własne i. To współczesne rozwiązanie tego problemu.

const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns[0](), fns[1](), fns[2]()); // 0 1 2

Domknięcia utrzymują pamięć przy życiu

Tak długo, jak istnieje domknięcie, przechwytywane przez nie zmienne nie mogą zostać usunięte przez garbage collector. Zwykle nie stanowi to problemu, ale może prowadzić do wycieków pamięci, jeśli domknięcia są przechowywane dłużej, niż jest to potrzebne.

function make() {
  const big = new Array(3).fill("data");
  return () => big.length;
}
const f = make();
console.log(f()); // 3 - big stays in memory via f

Domknięcia są wszędzie

Callbacki, procedury obsługi zdarzeń, setTimeout, metody tablic i promises korzystają z domknięć, aby zapamiętywać kontekst. Używają ich Państwo nieustannie, często nawet tego nie zauważając.

function greet(name) {
  return () => console.log("Hi " + name);
}
[greet("Ada"), greet("Bob")].forEach((fn) => fn());
// Hi Ada
// Hi Bob

Sprawdzanie przechwyconego stanu

Wiele domknięć utworzonych podczas tego samego wywołania współdzieli te same przechwycone zmienne, więc jedno może odczytywać to, co zapisuje inne.

function pair() {
  let value = 0;
  return {
    set: (v) => { value = v; },
    get: () => value
  };
}
const p = pair();
p.set(42);
console.log(p.get()); // 42

Szybkie sprawdzenie

Jak domknięcia przechwytują stan.

Podsumowanie

Domknięcie to funkcja wraz z odwołaniami do zakresu, w którym została zdefiniowana. Dzięki zakresowi leksykalnemu pamięta zmienne zewnętrzne po zakończeniu działania funkcji zewnętrznej, przechwytując je przez odwołanie, a nie przez wartość. Każde wywołanie funkcji zewnętrznej tworzy niezależny zakres; należy używać let, aby uniknąć pułapki pętli. Domknięcia utrzymują przechwyconą pamięć przy życiu i stanowią podstawę callbacków używanych wszędzie.

Często zadawane pytania

Czy lekcja „Jak domknięcia przechwytują stan” jest bezpłatna?

Tak — pełny tekst „Jak domknięcia przechwytują stan” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Jak domknięcia przechwytują stan”?

Proszę zrozumieć środowisko leksykalne domknięć. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Jak domknięcia przechwytują stan”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy