Jakie są zamknięcia JavaScript z przykładami?

JavaScript to wszechstronny język programowania, który obsługuje szeroki zakres paradygmatów programowania. Jedną z najpotężniejszych cech JavaScript jest zamknięcia, które pozwalają programistom tworzyć potężny i elastyczny kod. W tym artykule zbadamy, jakie są zamknięcia i jak działają, wraz z kilkoma przykładami.

Co to jest zamknięcie w JavaScript?

Zamknięcie to funkcja wewnętrzna, która ma dostęp do zmiennych, parametrów i argumentów funkcji zewnętrznej. Funkcja wewnętrzna może uzyskać dostęp do tych zmiennych nawet po powrocie funkcji zewnętrznej. Zamknięcie umożliwia zamknięcie i ochrona danych w ramach funkcji, uniemożliwiając im dostęp do innych funkcji.

Zamknięcia są tworzone, gdy funkcja jest zdefiniowana w innej funkcji i zwracana jako wartość. Zwracana funkcja utrzymuje odniesienie do zmiennych w funkcji zewnętrznej, nawet po powrocie funkcji zewnętrznej. Oznacza to, że funkcja wewnętrzna może uzyskać dostęp i manipulować tymi zmiennymi.

Zamknięcia można stosować w różnych sytuacjach, takich jak tworzenie prywatnych zmiennych i metod, wdrażanie zwrotów zwrotnych i obsługi wydarzeń oraz zarządzanie państwem.

Przykład 1: Prywatne zmienne i metody

Jednym z najczęstszych zastosowań zamknięć jest tworzenie prywatnych zmiennych i metod. Prywatne zmienne i metody nie są dostępne spoza funkcji, co czyni je bezpieczniejszymi i mniej podatnymi na błędy.

funkcja licznika () Let Count = 0; funkcja increment () count ++; konsola.log (Count); Przyrost zwrot; const incrementCount = licznik (); incrementCount (); // 1 incrementCount (); // 2 incrementCount (); // 3

12345678910111213141516

funkcja licznika () Let Count = 0; funkcja increment () count ++; konsola.log (Count); return increment; const incrementCount = Counter (); incrementCount (); // 1incrementCount (); // 2incrementCount (); // 3

W powyższym przykładzie stworzyliśmy lada funkcja, która zwraca funkcję przyrostu. liczyć Zmienna jest zdefiniowana w lada funkcja, ale jest dostępna tylko z przyrost funkcjonować. Za każdym razem przyrost Funkcja jest wywoływana, zwiększa zmienną liczby i rejestruje nową wartość do konsoli.

Przykład 2: Callback i obsługi wydarzeń

Zamknięcia można również wykorzystać do wdrożenia zwrotów zwrotnych i obsługi zdarzeń. Zemolerze to funkcja przekazywana jako argument innej funkcji i wywoływana jest po zakończeniu drugiej funkcji. Obserwatrzy zdarzeń to funkcje wywoływane w odpowiedzi na określone zdarzenie, takie jak kliknięcie przycisku lub przesyłanie formularzy.

funkcja fetchData (url, callback) fetch (url) .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (data => callback (dane)) .Catch (błąd => konsola.błąd (błąd)); fetchData ('https: // api.przykład.com/data ', funkcja (data) konsola.log (dane); );

12345678910

funkcja fetchData (url, callback) fetch (url) .Następnie (odpowiedź => odpowiedź.JSON ()) .Następnie (data => callback (dane)) .Catch (błąd => konsola.błąd (błąd)); fetchData ('https: // api.przykład.com/data ', funkcja (data) konsola.log (data););

W powyższym przykładzie stworzyliśmy FetchData funkcja, która przyjmuje adres URL i funkcję zwrotną jako argumenty. FetchData funkcja używa aportować API w celu pobrania danych z określonego adresu URL, a następnie przekazuje te dane do funkcji wywołania zwrotnego. Funkcja wywołania zwrotnego jest zdefiniowana jako funkcja anonimowa, która rejestruje dane do konsoli.

Przykład 3: Stan zarządzania

Zamknięcia można również wykorzystać do zarządzania stanem w programie. Stan odnosi się do danych opisujących bieżący warunek programu, takie jak wprowadzanie użytkownika lub ustawienia aplikacji.

funkcja createCounter (inicitialValue = 0) let Count = innitialValue; return increment () count ++; konsola.log (Count); , spadek () count--; konsola.log (Count); , reset () count = innitialValue; konsola.log (Count); ; cont licznik = createCounter (5); lada.przyrost(); // 6 licznik.zmniejszenie (); // 5 licznik.Resetowanie(); // 5

123456789101112131415161718192021222324

funkcja createCounter (inicitialValue = 0) let Count = innitialValue; return increment () count ++; konsola.log (Count); , spadek () count--; konsola.log (Count); , reset () count = innitialValue; konsola.log (Count); ; const licznik = CreateCounter (5); lada.przyrost(); // 6Counter.zmniejszenie (); // 5Counter.Resetowanie(); // 5

W powyższym przykładzie stworzyliśmy CreateCounter Funkcja, która zwraca obiekt z trzema metodami: przyrost, zmniejszenie, I Resetowanie. Metody Dostęp i manipulują zmienną liczby zdefiniowanej w CreateCounter funkcjonować. Początkowa wartość liczyć jest ustawiony na parametr wartości początkowej przekazanej CreateCounter. Każda metoda zwraca zaktualizowaną wartość liczyć i loguje go do konsoli.

lada obiekt zwrócony przez CreateCounter utrzymuje odniesienie do zmiennej liczby w CreateCounter funkcja, umożliwiająca przyrost, zmniejszenie, I Resetowanie Metody dostępu i modyfikacji stanu programu.

Wniosek

Podsumowując, zamknięcia są potężną funkcją JavaScript, która pozwala tworzyć elastyczny i bezpieczny kod. Zamknięcia są tworzone, gdy funkcja jest zdefiniowana w innej funkcji i zwracana jako wartość. Zwracana funkcja utrzymuje odniesienie do zmiennych w funkcji zewnętrznej, nawet po powrocie funkcji zewnętrznej. Zamknięcia mogą być stosowane w różnych sytuacjach, takich jak tworzenie prywatnych zmiennych i metod, wdrażanie zwrotów zwrotnych i obsługi wydarzeń oraz zarządzanie stanem. Korzystając z zamknięć w kodzie JavaScript, możesz napisać bardziej solidne i możliwe do utrzymania aplikacje.