Zamknięcia JavaScript
Zmienne JavaScript mogą należeć do zasięgu lokalnego lub globalnego .
Zmienne globalne mogą być lokalne (prywatne) za pomocą zamknięć .
Zmienne globalne
A functionmoże uzyskać dostęp do wszystkich zmiennych zdefiniowanych wewnątrz funkcji, na przykład:
Przykład
function myFunction() {
let a = 4;
return a * a;
}
Ale functionmoże również uzyskać dostęp do zmiennych zdefiniowanych poza funkcją, na przykład:
Przykład
let a = 4;
function myFunction() {
return a * a;
}
W ostatnim przykładzie a jest zmienną globalną .
Na stronie internetowej zmienne globalne należą do obiektu window.
Zmienne globalne mogą być używane (i zmieniane) przez wszystkie skrypty na stronie (iw oknie).
W pierwszym przykładzie a jest zmienną lokalną .
Zmienna lokalna może być używana tylko wewnątrz funkcji, w której jest zdefiniowana. Jest ukryty przed innymi funkcjami i innym kodem skryptowym.
Zmienne globalne i lokalne o tej samej nazwie to różne zmienne. Modyfikacja jednego nie zmienia drugiego.
Zmienne utworzone bez słowa kluczowego deklaracji ( var,
letlub const) są zawsze globalne, nawet jeśli są tworzone wewnątrz funkcji.
Przykład
function myFunction() {
a = 4;
}
Zmienna żywotność
Zmienne globalne są aktywne do momentu odrzucenia strony, na przykład w przypadku przejścia do innej strony lub zamknięcia okna.
Zmienne lokalne mają krótkie życie. Są one tworzone po wywołaniu funkcji i usuwane po zakończeniu funkcji.
Kontrdylemat
Załóżmy, że chcesz użyć zmiennej do zliczania czegoś i chcesz, aby ten licznik był dostępny dla wszystkich funkcji.
Możesz użyć zmiennej globalnej oraz a functiondo zwiększenia licznika:
Przykład
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
Jest problem z powyższym rozwiązaniem: Dowolny kod na stronie może zmienić licznik, bez wywoływania add().
Licznik powinien być lokalny dla add()funkcji, aby uniemożliwić innym kodom jego zmianę:
Przykład
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
To nie zadziałało, ponieważ wyświetlamy licznik globalny zamiast licznika lokalnego.
Możemy usunąć licznik globalny i uzyskać dostęp do licznika lokalnego, pozwalając funkcji go zwrócić:
Przykład
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1.
To nie zadziałało, ponieważ resetujemy lokalny licznik za każdym razem, gdy wywołujemy funkcję.
Wewnętrzna funkcja JavaScript może rozwiązać ten problem.
Funkcje zagnieżdżone JavaScript
Wszystkie funkcje mają dostęp do zakresu globalnego.
W rzeczywistości w JavaScript wszystkie funkcje mają dostęp do zakresu „nad” nimi.
JavaScript obsługuje funkcje zagnieżdżone. Funkcje zagnieżdżone mają dostęp do zakresu „nad” nimi.
W tym przykładzie funkcja wewnętrzna plus()ma dostęp do counterzmiennej w funkcji rodzica:
Przykład
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Mogłoby to rozwiązać dylemat licznika, gdybyśmy mogli dotrzeć do plus()
funkcji z zewnątrz.
Musimy też znaleźć sposób na wykonanie counter = 0tylko raz.
Potrzebujemy zamknięcia.
Zamknięcia JavaScript
Pamiętasz funkcje samowywołujące? Do czego służy ta funkcja?
Przykład
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Przykład wyjaśniony
Zmienna addjest przypisana do wartości zwracanej przez funkcję samowywołującą.
Funkcja samowywoływania działa tylko raz. Ustawia licznik na zero (0) i zwraca wyrażenie funkcji.
W ten sposób add staje się funkcją. „Cudowną” częścią jest to, że może uzyskać dostęp do licznika w zakresie nadrzędnym.
Nazywa się to zamknięciem JavaScript. Dzięki temu funkcja może mieć zmienne „ prywatne ”.
Licznik jest chroniony przez zakres funkcji anonimowej i można go zmienić tylko za pomocą funkcji add.
Zamknięcie to funkcja mająca dostęp do zakresu nadrzędnego, nawet po zamknięciu funkcji nadrzędnej.