Czym są zamknięcia JavaScript i jak je pisać?

JavaScript jest jednym z najtrudniejszych do opanowania języków programowania. Czasami nawet starsi programiści nie są w stanie przewidzieć wyniku kodu, który napisali. Jednym z bardziej mylących pojęć w JavaScript są domknięcia. Początkujący zwykle wpadają na pomysł — nie martw się. Ten artykuł powoli przeprowadzi Cię przez podstawowe przykłady, które pomogą Ci lepiej zrozumieć zamknięcia. Zacznijmy.

Jakie są zamknięcia?

Zamknięcie to struktura funkcji i jej środowiska leksykalnego, w tym wszelkie zmienne w zakresie funkcji w momencie tworzenia domknięcia. Mówiąc prościej, rozważ funkcję zewnętrzną i funkcję wewnętrzną. Funkcja wewnętrzna będzie miała dostęp do zakresu funkcji zewnętrznej.

Zanim przyjrzysz się kilku przykładom domknięć JavaScript, musisz zrozumieć zakres leksykalny.

Co to jest środowisko leksykalne?

Środowisko leksykalne to pamięć lokalna wraz ze środowiskiem macierzystym. Sprawdź poniższy przykład i odgadnij wynik następującego kodu:

funkcja zewnętrzna () { 
 niech a = 10;





instagram viewer


 konsola.log (y);
 wewnętrzny();
 funkcja wewnętrzna () {
 console.log (a);
 konsola.log (y);
 }
}
niech y = 9;
zewnętrzny();

Dane wyjściowe będą 9, 10, 9. Funkcja wewnętrzna ma dostęp do zmiennych swojego rodzica, the zewnętrzny() funkcjonować. Stąd wewnętrzny() funkcja może uzyskać dostęp zmienna a. ten wewnętrzny() funkcja może również uzyskać dostęp zmienna y ze względu na koncepcję łańcuch zasięgu.

Rodzic funkcji zewnętrznej jest globalny, a rodzic funkcji wewnętrzny() funkcja jest zewnętrzny() funkcjonować. Stąd wewnętrzny() funkcja ma dostęp do zmiennych swoich rodziców. Jeśli spróbujesz uzyskać dostęp do zmiennej a w zasięgu globalnym wyświetli błąd. Można więc powiedzieć, że wewnętrzny() funkcja jest leksykalnie wewnątrz zewnętrzny() funkcja i leksykalny rodzic zewnętrzny() funkcja jest globalna.

Wyjaśnienie przykładów zamykania JavaScript

Ponieważ poznałeś środowisko leksykalne, możesz łatwo odgadnąć wynik następującego kodu:

funkcja a(){
 niech x = 10;
 funkcja b(){
 konsola.log (x);
 }
 b();
}
a();

Wyjście to 10. Chociaż możesz tego nie zgadnąć na pierwszy rzut oka, jest to przykład domknięcia w JavaScript. Zamknięcia to nic innego jak funkcja i ich środowisko leksykalne.

Rozważmy przykład, w którym znajdują się trzy funkcje zagnieżdżone w sobie:

funkcja a(){ 
 niech x = 10;
 funkcja b(){ 
 funkcja c(){
 funkcja d(){
 konsola.log (x);
 }
 D();
 }
 C();
 }
 b();
}
a();

Czy to nadal będzie nazywane zamknięciem? Odpowiedź brzmi tak. Zamknięcie jest funkcją z jej leksykalnym rodzicem. Leksykalny rodzic funkcji D() jest C(), a ze względu na koncepcję łańcucha zasięgu funkcja D() ma dostęp do wszystkich zmiennych funkcji zewnętrznych i globalnych.

Spójrz na inny interesujący przykład:

funkcja x(){
 niech a = 9;
 funkcja powrotu y(){
 console.log (a); 
 }
}
niech b = x();

Możesz zwrócić funkcję wewnątrz funkcji, przypisać funkcję do zmiennej i przekazać funkcję wewnątrz funkcji funkcja w JavaScript. Na tym polega piękno języka. Czy możesz zgadnąć, jaki będzie wynik, jeśli wypiszesz zmienną? b? Będzie drukować funkcję y(). Funkcja x() zwraca funkcję y(). Stąd zmienna b przechowuje funkcję. Czy możesz zgadnąć, co się stanie, jeśli wywołasz zmienną? b? Wypisuje wartość zmiennej a: 9.

Możesz także ukryć dane za pomocą zamknięć. Aby lepiej zrozumieć, rozważ przykład z przyciskiem, który ma identyfikator o nazwie „przycisk” w przeglądarce. Dołączmy do niego detektor zdarzenia kliknięcia.

Teraz musisz obliczyć, ile razy przycisk został kliknięty. Można to zrobić na dwa sposoby.

1. Utwórz globalną liczbę zmiennych i zwiększ ją po kliknięciu. Ale ta metoda ma wadę. Modyfikowanie zmiennych globalnych jest łatwe, ponieważ są one łatwo dostępne.

   Kliknij
   
   

2. Ukrywanie danych możemy osiągnąć za pomocą zamknięć. Możesz owinąć całość dodajOdbiornikZdarzeń() funkcja wewnątrz funkcji. To zamyka. A po utworzeniu zamknięcia możesz utworzyć liczba zmienna i zwiększać jego wartość po kliknięciu. Korzystając z tej metody, zmienna pozostanie w zakres funkcjonalnyi nie można wprowadzać żadnych modyfikacji.

   Kliknij
   
   

Związane z: Ukryty bohater stron internetowych: Zrozumienie DOM

Dlaczego zamknięcia są ważne?

Domknięcia są bardzo ważne nie tylko w przypadku JavaScript, ale także w innych językach programowania. Są przydatne w wielu scenariuszach, w których można między innymi tworzyć zmienne w ich prywatnym zakresie lub łączyć funkcje.

Rozważmy następujący przykład składu funkcji:

const mnoż = (a, b) => a*b;
const pomnóżBy2 = x => pomnóż (10, x);
console.log (multiplyBy2(9));

Ten sam przykład możemy zaimplementować za pomocą zamknięć:

mnożenie stałej = funkcja (a){
 funkcja powrotu (b){
 zwróć a*b
 }
}
const mnoż przez2 = mnoż (2);
console.log (multiplyBy2(10))

Funkcje mogą używać zamknięć w następujących scenariuszach:

1. Aby wdrożyć currying funkcji
2. Służy do ukrywania danych
3. Do użytku z detektorami zdarzeń
4. Do użycia w metodzie setTimeout()

Nie powinieneś niepotrzebnie używać zamknięć

Zaleca się unikanie zamknięć, chyba że jest to naprawdę potrzebne, ponieważ mogą one obniżyć wydajność Twojej aplikacji. Używanie domykania będzie kosztować dużo pamięci, a jeśli zamknięcia nie są właściwie obsługiwane, może prowadzić do: wycieki pamięci.

Zamknięte zmienne nie zostaną zwolnione przez garbage collector JavaScript. Gdy używasz zmiennych wewnątrz zamknięć, moduł odśmiecania pamięci nie zwalnia pamięci, ponieważ przeglądarka czuje, że zmienne są nadal używane. Dlatego te zmienne zużywają pamięć i obniżają wydajność aplikacji.

Oto przykład pokazujący, w jaki sposób zmienne wewnątrz zamknięć nie będą zbierane w postaci śmieci.

 funkcja f(){
 const x = 3;
 zwróć funkcję inner() {
 konsola.log (x);
 }
 }
 F()();

ten zmienna x tutaj zużywa pamięć, mimo że nie jest często używana. Odśmiecacz nie będzie w stanie zwolnić tej pamięci, ponieważ znajduje się ona w zamknięciu.

JavaScript jest nieskończony

Opanowanie języka JavaScript to niekończące się zadanie, ponieważ istnieje tak wiele koncepcji i frameworków, które zazwyczaj nie są eksplorowane przez samych doświadczonych programistów. Możesz znacznie poprawić swoją obsługę JavaScript, ucząc się podstaw i często je ćwicząc. Iteratory i generatory to niektóre z koncepcji, o które pytają podczas wywiadów JavaScript.

Wprowadzenie do iteratorów i generatorów w JavaScript

Poznaj metody iteratora i generatora w JS.

Czytaj dalej

O autorze