Zamknięcia funkcji JavaScript | Wyjaśnione
Pojęcie zamknięć istnieje już od dłuższego czasu, ale ludzie mają trudności z jej zrozumieniem. Przeżyjemy krok po kroku i sprawić, że naprawdę łatwo jest zrozumieć za pomocą przykładów.
Jakie są zamknięcia w JavaScript
Bardzo krótko, zamknięcie ma dostęp do zewnętrznego zakresu z wewnętrznego zakresu podczas pracy z zagnieżdżonymi funkcjami. Zamknięcie jest tworzone za każdym razem, gdy funkcja zagnieżdżona jest w JavaScript. Zmienne zdefiniowane w funkcji są tworzone podczas wykonywania funkcji i są usuwane z pamięci po pełnym wykonaniu odpowiedniej funkcji.
Aby zrozumieć koncepcję zamknięcia w JavaScript, musimy znać różnicę między zakresem globalnym a lokalnym zakresem. Cóż, omówimy je naprawdę krótko.
Zakres zmiennej
Jak wspomniano powyżej, w JavaScript istnieją dwa główne rozszczepienia zmiennych:
- Zakres globalny
- Lokalny zakres
Zmienne zdefiniowane poza dowolną funkcją są znane jako zmienne globalne i mam Zakres globalny. Zmienne te można uzyskać z dowolnego miejsca w programie, dlatego używamy terminu „globalny”.
Dla porównania, zmienne zdefiniowane wewnątrz funkcji są znane jako zmienne lokalne i wiadomo, że mają lokalny zakres. Lokalny zakres jest dalej podzielony na zakres funkcji i zakres bloków, ale nie jest to dla nas poważny problem. Zmienne lokalne można uzyskać dostęp tylko z funkcji, w której są one zadeklarowane
Weź ten blok kodu, aby zrozumieć zakres:
var sitename = "Linuxhint!";funkcja printSiteName ()
niech TopicName = "javascript";
konsola.log (SiteName);
printSiteName ();
konsola.log (nazwa tematu);
To, co robimy w powyższym kodzie, to to, że tworzymy zmienną globalną Nazwa strony I drukujemy go w funkcji zwanej printSiteName (), Ta funkcja obejmuje zmienną lokalną Nazwa tematu i staramy się wydrukować wartość tej zmiennej poza tą funkcją. Tutaj, Nazwa strony jest zmienną globalną i Nazwa tematu jest zmienną lokalną. Dane wyjściowe następującego kodu jest:
Jak wyraźnie widać, mogliśmy uzyskać dostęp do Nazwa strony zmienne wewnątrz funkcji, ale nie byliśmy w stanie uzyskać dostępu do zmiennej lokalnej Nazwa tematu poza jej funkcją. Możesz dowiedzieć się więcej o tych różnych zmiennych i zakresie.
Jak działa zamknięcie w JavaScript
Teraz, gdy wiemy, jak działa zakres w JavaScript, możemy łatwo zrozumieć działanie zamknięć.
Domknięcia są funkcjami, które są zagnieżdżone w sobie w taki sposób, że funkcja wewnętrzna staje się lokalnie zaskoczona dla funkcji zewnętrznej, a funkcja zewnętrzna staje się globalnie zaskoczona dla funkcji wewnętrznej. Co oznacza, że funkcja wewnętrzna ma dostęp do atrybutów funkcji zewnętrznej.
Aby lepiej zrozumieć, weź następujący kod:
funkcja zewnętrzna funkcja ()Let Outvar = "Jestem zewnętrzny";
funkcja innerFunction ()
Niech Invar = „Jestem wewnętrzny”;
konsola.log (Outvar);
konsola.log (Invar);
return innerFunction ();
Outerfunction ();
Tworzymy funkcja zewnętrzna i funkcja wewnętrzna w środku funkcja zewnętrzna. Z funkcji wewnętrznej uzyskujemy dostęp do zmiennej Outvar która jest lokalną zmienną funkcja zewnętrzna, i drukowanie jej wartości wraz z wartością zmiennej wewnątrz funkcji wewnętrznej.
Tak działa ten kod:
Dane wyjściowe powyższego kodu to:
Byliśmy w stanie uzyskać wartości zarówno zmiennych i wydrukować je do konsoli za pomocą konsola.dziennik() funkcjonować.
Jak mieć wiele funkcji w innej funkcji w zamknięciu
Jeśli nazywamy funkcję zewnętrzną jako funkcja nadrzędna zamknięcia i funkcji wewnętrznej jako funkcja dziecka zamknięcia. Następnie możemy to ująć, że samotny rodzic może mieć wiele dzieci. Funkcja nadrzędna nie będzie miała dostępu do atrybutów swoich dzieci. Jednak każde dziecko będzie miało dostęp do atrybutów swojego rodzica. Ponieważ funkcja dziecka jest również atrybutem rodzica, więc funkcja dziecka może również uzyskać dostęp do innych funkcji dziecka tego samego rodzica; Oznacza to dostęp do rodzeństwa.
Notatka: Parametry i argumenty są również dostępne dla dzieci.
Załóżmy, że chcemy wykonać funkcję, która wita funkcję, która ją wywołuje. Ta funkcja ma 3 parametry, nazwę FirstName, MiddleName i LastName.
Najpierw utwórz funkcję za pomocą następujących wierszy.
Function Greeter (FirstName, MiddleName, LastName)// później polecenia w środku tutaj
Ta funkcja pozdrowienia jest funkcją nadrzędną z czwórką dzieci. 3 dzieci pracują nad parametrami i zwraca wartość parametrów takich jak:
funkcja getFirst ()zwrócić nazwę pierwszej;
funkcja getmiddle ()
return MiddleName;
funkcja getLast ()
Zwróć LastName;
Ostatnie dziecko, nazywa całe rodzeństwo i drukuje wartości na konsoli, która jest zaimplementowana z następującymi wierszami:
funkcja namePrinter ()konsola.Log („Witaj! " + getFirst () +" " + getMiddle () +" " + getLast ());
Na końcu funkcji nadrzędnej pozdrawiacz() Zwraca namePrinter () dziecko do miejsca, w którym się nazywa.
Wykonaj tę całość Zamknięcie Musimy wywołać funkcję nadrzędną z następującym wierszem:
Pozdrów („John”, „Bukhari”, „Doe”);Pełny fragment kodu tego zamknięcia to:
Function Greeter (FirstName, MiddleName, LastName)funkcja getFirst ()
zwrócić nazwę pierwszej;
funkcja getmiddle ()
return MiddleName;
funkcja getLast ()
Zwróć LastName;
funkcja namePrinter ()
konsola.Log („Witaj! " + getFirst () +" " + getMiddle () +" " + getLast ());
return namePrinter ();
Pozdrów („John”, „Bukhari”, „Doe”);
Otrzymamy następujące dane wyjściowe:
Wniosek
Zamknięcie jest funkcją, która została dostarczona z wydaniem JavaScript ES6. Zamknięcia są wdrożeniem koncepcji opartej na zakresie zmiennych w JavaScript. Nauczyliśmy się, jakie są zamknięcia, a ponieważ są one oparte na zasięgu zmiennych, dowiedzieliśmy się również o zakresie zakresu. Przeszliśmy różnicę między globalnym zakresem a zmiennym zakresem w JS, a ostatecznie przetestowaliśmy działanie zamknięć za pomocą przykładów.