Co to jest zakres i zamknięcie w JavaScript?

Kiedy zaczynasz JavaScript, możesz napotkać zakres i zamknięcia. Są to bardzo ważne pojęcia, których można się nauczyć dla początkującego. Nawet w wywiadach ankieter pyta o zamknięcia.Dzisiaj omówimy, czym jest zakres i jakie są podstawowe pojęcia zakresu w JavaScript. Po omówieniu zakresu, pójdziemy w kierunku zamknięcia i omówimy to. Pod koniec tego artykułu będziesz mieć wiedzę na temat zakresów i zamknięcia w JavaScript.

Przed rozpoczęciem sugeruję, abyś nie skakał bezpośrednio, aby zamknąć bez zrozumienia zakresu. Powodem tego jest to, że dla koncepcji zamknięcia zrozumienie koncepcji zakresu jest bardzo ważne.

Zakres

Zmienne, do których masz dostęp, jest zakresem tej zmiennej i są podzielone na dwie części:

Zakres globalny

Jeśli zmienna jest dostępna w całym programie, ma globalny zakres. Innymi słowy, możemy powiedzieć, że jeśli zmienna jest poza wszystkimi funkcjami i kręconymi aparatami ortodontycznymi, jest to zmienna globalna i ma globalny zakres.

Przykładem globalnego zakresu w JavaScript jest:

const globalName = "John Cena";

Teraz, gdy zadeklarowaliśmy zmienną o nazwie GlobalName, możemy uzyskać jej wartość w dowolnym miejscu w kodzie, w tym funkcje/metody.

Na przykład:

// Zmienna globalna
const globalName = "John Cena";
// Funkcja z nazwą pozdrowienia
Funkcja Greet ()
konsola.log („Hello”, GlobalName);

// wywoływanie funkcji pozdrowienia
powitać();
// ponownie dostęp do zmiennej globalnej funkcji zewnętrznej
konsola.log („Hello Again”, GlobalName);

W tym przykładzie zainicjowaliśmy zmienną o nazwie GlobalName. Następnie skonstruowaliśmy funkcję, w której powitaliśmy globalną nazwę. Następnie wywołaliśmy funkcję z tym stwierdzeniem powitać(). Po tym my konsola.dziennik GlobalName zmienne, aby sprawdzić, czy jest dostępna poza funkcją, czy nie. Wyjście pokazane w konsoli to:

Należy jednak pamiętać, że większość programistów nie zaleca deklarowania zmiennej na całym świecie, ponieważ istnieje ryzyko zduplikowanych nazw zmiennych. Duplikowane nazwy zmiennych występują, gdy dwie zmienne mają tę samą nazwę. W większości przypadków spowoduje to błąd, który będzie trudny do debugowania.

Lokalny zakres

Jak sama nazwa wskazuje, zmienna lokalna ma zakres lokalny. Oznacza to, że jest dostępny tylko w ramach funkcji/metody lub bloku kodu. Poza tym obszarem nie jest dostępny, a JavaScript wygeneruje błąd. Lokalny zakres w JavaScript jest podzielony na dwa rodzaje.

Zakres funkcji

Jeśli zmienna zostanie zadeklarowana w ramach funkcji, będzie dostępna tylko w tej funkcji i nie będzie dostępna poza nią.

Na przykład:

// Funkcja z nazwą pozdrowienia
Funkcja Greet ()
// zmienna lokalna
const localName = "Randy Orton";
konsola.log („Hello”, nazwa lokalna);

// wywoływanie funkcji pozdrowienia
powitać();
// ponownie dostęp do zmiennej lokalnej funkcji zewnętrznej
// to wygeneruje błąd
konsola.log („Hello Again”, LocalName);

W tym przykładzie zainicjowaliśmy zmienną nazwę lokalną, a następnie konsolę.Zaloguj się. To pokaże nam wyjście "Randy Orton" W dzienniku konsoli. Jednak kiedy pocieszamy.Zaloguj zmienną lokalną w ostatnim wierszu, wygeneruje błąd.

Wyjście:

Zakres bloków

Zakres bloków mówi nam, że jeśli ogłosimy zmienną w nawiasach kręconych, te kręcone wsporniki będą jego zakresem. To nazywa się lunetą blokową. Nie można uzyskać dostępu do zmiennej zakresu bloków poza kręconymi aparatami ortodontycznymi.

Na przykład:

const name = "Rey Mysterio";
konsola.log („Hello”, nazwa);

W tym przykładzie zadeklarowaliśmy zmienną mającą zakres bloków, ponieważ znajduje się w klamrze kręconym. Następnie pocieszamy go.

Wyjście „Witaj Rey Mysterio” jest widoczny w dzienniku konsoli. Jednak po konsoli zaloguj się na zewnątrz, wygenerowany zostanie błąd,.

Czy funkcja uzyskuje dostęp do innego zakresu funkcji?

Jak już omawialiśmy zakres funkcji, rzućmy nieco światła na pytanie, czy dwie funkcje mają zakres, czy nie. Odpowiedź brzmi nie, jeśli ogłosimy zmienną w jednej funkcji i próbujemy uzyskać dostęp do niej w innej funkcji, nie będzie dostępna.

Na przykład:

funkcja FIRSTMESSAGE ()
const message = "Jestem pierwszą funkcją";
konsola.log („Dostęp z pierwszej funkcji:”, wiadomość);

funkcja secondmessage ()
pierwsza wiadomość();
konsola.log („Dostęp z drugiej funkcji”, Message);

SecondMessage ();

W tym przykładzie skonstruowaliśmy funkcję o nazwie FirstMessage i zadeklarowaliśmy zmienną, po czym pocieszamy.Zaloguj się. Następnie skonstruowaliśmy drugą zmienną i nazwaliśmy funkcję FirstMessage (). Będzie działać dobrze i będziemy mogli zobaczyć wiadomość dla konsoli z funkcji FirstMessage (). Jednak gdy próbujemy uzyskać dostęp do komunikatu zmiennej z funkcji FIRNMESSAGE () w funkcji SecondMessage (), zobaczymy błąd.

Ten błąd jest rozwiązany przez zamknięcia.

Co to jest zamknięcie w JavaScript?

Jeśli kiedykolwiek utworzyłeś funkcję w innej funkcji, w zasadzie utworzyłeś zamknięcie. Funkcja wewnętrzna nazywana jest zamknięciem, a bardziej techniczną definicją byłoby to, że funkcja posiadająca dostęp do zakresu funkcji nadrzędnej, nawet gdy funkcja nadrzędna jest nazywana zamknięciem.

Omówmy przykład zamknięcia:

funkcja nadrzędnafunc ()
niech nameParent = „rodzic”;
konsola.log (NameParent);
funkcja childfunc ()
konsola.log („dziecko i”, nameparent);

zwrócić Childfunc;

const Store = paryfunc ();
konsola.log (sklep);
sklep();

W tym przykładzie skonstruowaliśmy ParentFunc i zainicjował zmienną Nameparent. Potem pocieszamy.Zaloguj się nazwa i skonstruował drugą funkcję w funkcji nadrzędnej i-e childfunc. W tej funkcji dziecka pocieszamy logowanie ciągu „dziecko i” ze zmienną nazwy. Widzimy, że rodzic Func zwraca Childfunc. Teraz, kiedy zadzwonimy do dziennika konsoli ParentFunc, pokaże nam tylko nazwa. Childfunc nie był wezwany i nie wszedł do działania. Jednak funkcja zewnętrzna i wewnętrzna jest przechowywana w sklepie zmiennym. Kiedy pocieszamy zalogowanie sklepu, zobaczymy obie funkcje. Kiedy nazywamy sklep(), W rzeczywistości wywołujemy funkcję wewnętrzną lub funkcję anonimową, która jest chidfunc wewnątrz nadrzędnego (). Teraz zobaczymy wewnętrzną konsolę funkcji.log I-E „Dziecko i rodzic”,

Utworzone przez nas zamknięcie pozwala nam również użyć zakresu ParentFunc.

Wniosek

W tym artykule omówiliśmy pojęcia zakresu i zamknięcia oraz w zakresie, omówiliśmy dwa główne typy zakresu, które są: globalny zakres i zakres lokalny. Dalej w zakresie lokalnym omówiliśmy zakres funkcjonalny i blokowanie rozszczepień wraz z przykładami. Następnie natknęliśmy się na problem, który ma dostęp do innego zakresu funkcji. Rozwiązaliśmy to za pomocą omawiania zamknięcia wraz z przykładami.