Domknięcia w JavaScript

Ten artykuł wyjaśnia domknięcia w JavaScript.

YouTube Video

Domknięcia w JavaScript

W JavaScript 'domknięcie' to jeden z bardzo ważnych i potężnych konceptów. Rozumiejąc domknięcia, możesz zdobyć wiedzę przydatną w wielu sytuacjach, takich jak zachowanie i zakres funkcji, a także asynchroniczne przetwarzanie oraz obsługa zdarzeń w JavaScript. Tutaj szczegółowo wyjaśnimy wszystko od podstawowej definicji domknięć po konkretne przykłady i ich zastosowania.

Czym jest domknięcie?

Domknięcie odnosi się do mechanizmu, w którym funkcja może uzyskiwać dostęp do zmiennych ze swojego zakresu tworzenia nawet wtedy, gdy jest wywoływana poza tym zakresem. Dzięki wykorzystaniu domknięć funkcje mogą stale 'zapamiętywać' zewnętrzne zmienne.

Domknięcia składają się z następujących dwóch elementów.

1. Definicja funkcji (czyli sama funkcja)

2. Zakres, w którym funkcja jest zdefiniowana (zmienne i inne funkcje poza samą funkcją)

W JavaScript domknięcia są możliwe, ponieważ funkcje mają możliwość dostępu do zmiennych w zakresie, w którym zostały utworzone.

Podstawowy przykład

Najpierw przyjrzyjmy się podstawowemu przykładzie domknięcia. W poniższym kodzie funkcja outerFunction zwraca funkcję o nazwie innerFunction. Ważnym punktem jest to, że innerFunction ma dostęp do zmiennej count zdefiniowanej w zakresie outerFunction.

 1function outerFunction() {
 2    let count = 0;
 3
 4    function innerFunction() {
 5        count++;
 6        console.log(`Current count: ${count}`);
 7    }
 8
 9    return innerFunction;
10}
11
12const counter = outerFunction();
13counter(); // Current count: 1
14counter(); // Current count: 2
15counter(); // Current count: 3

Jak działają domknięcia

Jak widać w powyższym przykładzie, zmienna count jest zachowywana przez innerFunction nawet po wykonaniu outerFunction. innerFunction nadal ma dostęp do zakresu outerFunction, dlatego zmienna count jest aktualizowana wewnątrz innerFunction. To jest podstawowy mechanizm domknięcia.

To innerFunction jest przypisywana do zmiennej counter i widzimy, że stan count zostaje zachowany, mimo że outerFunction już zakończyła wykonywanie. Dzieje się tak, ponieważ JavaScript nieustannie 'zapamiętuje' zakres z momentu definicji funkcji.

Zastosowanie: Domknięcia jako zmienne prywatne

Domknięcia można wykorzystywać jak 'zmienne prywatne' w programowaniu obiektowym. Zazwyczaj w JavaScript właściwości obiektów są dostępne bezpośrednio z zewnątrz, jednak dzięki domknięciom można zapobiec bezpośredniej manipulacji zmiennymi w zakresie funkcji z zewnątrz.

W kolejnym przykładzie funkcja createCounter wykorzystuje domknięcie do utworzenia licznika i zwraca licznik ze zmienną prywatną count.

 1function createCounter() {
 2    let count = 0;
 3
 4    return {
 5        increment: function() {
 6            count++;
 7            console.log(`Count: ${count}`);
 8        },
 9        decrement: function() {
10            count--;
11            console.log(`Count: ${count}`);
12        },
13        getCount: function() {
14            return count;
15        }
16    };
17}
18
19const myCounter = createCounter();
20myCounter.increment(); // Count: 1
21myCounter.increment(); // Count: 2
22myCounter.decrement(); // Count: 1
23console.log(myCounter.getCount()); // 1

W tym przykładzie count znajduje się w zakresie funkcji createCounter, więc nie można się do niej dostać bezpośrednio z zewnątrz. Jednak można nią sterować za pomocą metod increment i decrement. W ten sposób, wykorzystując domknięcia, możesz zastosować koncepcję zmiennych prywatnych w JavaScript.

Praktyczne przykłady domknięć

Połączenie z funkcjami zwrotnymi (callback)

Domknięcia są często używane w połączeniu z funkcjami zwrotnymi (callback) do zarządzania przetwarzaniem asynchronicznym. Na przykład rozważmy przykład użycia timera.

 1function startTimer(duration) {
 2    let timeLeft = duration;
 3
 4    function countdown() {
 5        console.log(`Time left: ${timeLeft} seconds`);
 6        timeLeft--;
 7
 8        if (timeLeft >= 0) {
 9            setTimeout(countdown, 1000);
10        }
11    }
12
13    countdown();
14}
15
16startTimer(5);
17// Time left: 5 seconds
18// Time left: 4 seconds
19// Time left: 3 seconds
20// Time left: 2 seconds
21// Time left: 1 second
22// Time left: 0 seconds

W tym przykładzie funkcja countdown uzyskuje dostęp do zmiennej timeLeft w zakresie funkcji startTimer. W ten sposób domknięcia są bardzo przydatne przy asynchronicznym przetwarzaniu, takim jak timery, ponieważ utrzymują stan zmiennych w czasie.

Obsługa zdarzeń (Event Handlers)

Domknięcia są również wygodne podczas tworzenia obsługi zdarzeń. W poniższym przykładzie domknięcie służy do zapisywania liczby kliknięć przycisku.

 1function setupClickCounter(buttonId) {
 2    let clickCount = 0;
 3
 4    const button = document.getElementById(buttonId);
 5    button.addEventListener('click', function() {
 6        clickCount++;
 7        console.log(`Button clicked ${clickCount} times`);
 8    });
 9}
10
11setupClickCounter('myButton');

W takim przypadku wartość clickCount zwiększa się przy każdym kliknięciu i zostaje zachowana. Dzięki wykorzystaniu domknięć możesz przypisać niezależny licznik do każdego przycisku.

Wnioski

Domknięcia to koncepcja, która symbolizuje elastyczność i potęgę JavaScript. Przechowują zmienne zamknięte w zakresie funkcji i umożliwiają operacje na tych zmiennych za pomocą funkcji dostępnych z zewnątrz. Rozumiejąc i wykorzystując ten mechanizm, możesz uzyskać bardziej zaawansowane techniki kodowania w JavaScript.

Domknięcia znajdują zastosowanie w różnych sytuacjach – od obsługi zdarzeń i przetwarzania asynchronicznego aż po pseudoimplementacje programowania obiektowego.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video