Klony w JavaScript

Zmienne JavaScript należą dolokalnelokalneglobalnelokalne

lubKluczzakres.

globalne zmienne mogą być dostępne przez

globalne zmienne mogą być zaimplementowane jako lokalne (private).funkcja może uzyskać dostęp do zmiennych funkcjiwewnętrzne

Przykład

function myFunction() {
    var a = 4;
    return a * a;
}

Spróbuj sam

ale funkcje mogą również uzyskać dostęp do zmiennych zdefiniowanych w funkcjizewnętrznezdefiniowane zmienne, takie jak:

Przykład

var a = 4;
function myFunction() {
    return a * a;
}

Spróbuj sam

W ostatnim przykładziea jestglobalnezmienne.

W stronie internetowej, globalne zmienne należą do obiektu window.

Globalne zmienne mogą być używane i modyfikowane przez wszystkie skrypty na stronie (i w oknie).

W pierwszym przykładziea jestlokalnezmienne.

Lokalne zmienne mogą być używane tylko wewnątrz funkcji, w której są zdefiniowane. Dla innych funkcji i kodu skryptowego są niewidoczne.

Zmienne o tej samej nazwie w skali zmiennych globalnej i lokalnej są różnymi zmiennymi. Zmiana jednej nie zmieni drugiej.

niekluczowe słowo var Zmienne tworzone są zawsze globalne, nawet jeśli są tworzone w funkcji.

Cykl życia zmiennych

Globalne zmienne żyją tak długo, jak Twoja aplikacja (okno, strona internetowa).

Lokalne zmienne nie żyją długo. Są tworzone przy wywoływaniu funkcji i usuwane po zakończeniu funkcji.

Dylemat licznika

Załóżmy, że chcesz użyć zmiennej do liczenia i chcesz, aby ten licznik był dostępny dla wszystkich funkcji.

Możesz użyć globalnych zmiennych i funkcji do zwiększania licznika:

Przykład

// Inicjalizacja licznika
var counter = 0;
// Funkcja do zwiększania licznika
function add() {
  counter += 1;
}
// Wywołaj add() trzy razy
add();
add();
add();
// W tym momencie licznik powinien wynosić 3

Spróbuj sam

Powyższe rozwiązanie ma jeden problem: każda część kodu na stronie może zmienić licznik bez wywoływania add().

Dla funkcji add(), licznik powinien być lokalny, aby zapobiec zmianom go przez inne kod:

Przykład

// Inicjalizacja licznika
var counter = 0;
// Funkcja do zwiększania licznika
function add() {
  var counter = 0; 
  counter += 1;
}
// Wywołaj add() trzy razy
add();
add();
add();
// W tym momencie licznik powinien wynosić 3. Ale wynosi 0.

Spróbuj sam

Nie jest to użyteczne, ponieważ wyświetlamy globalny licznik zamiast lokalnego licznika.

Poprzez zwracanie funkcji, możemy usunąć globalny licznik i uzyskać dostęp do lokalnego licznika:

Przykład

// Funkcja do zwiększania licznika
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Wywołaj add() trzy razy
add();
add();
add();
// W tym momencie licznik powinien wynosić 3. Ale wynosi 1.

Spróbuj sam

Nie jest to użyteczne, ponieważ przy każdym wywołaniu funkcji lokalny licznik jest resetowany.

Wewnętrzne funkcje JavaScript mogą rozwiązać ten problem.

Wewnętrzne funkcje JavaScript

Wszystkie funkcje mają prawo do dostępu do globalnej skali zmiennych.

W rzeczywistości, w JavaScript wszystkich funkcji mają prawo do dostępu do ich "powyżej" skali zmiennych.

JavaScript obsługuje wewnętrzne funkcje. Wewnętrzne funkcje mogą uzyskać dostęp do swojej skali zmiennych.

W tym przykładzie, wewnętrzna funkcja plus() może uzyskać dostęp do zmiennych funkcji nadrzędnych counter licznik zmiennoprzestrzenny:

Przykład

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();     
    return counter; 
}

Spróbuj sam

W ten sposób możemy rozwiązać problem licznika, jeśli możemy uzyskać dostęp do niego z zewnątrz plus() funkcja.

Musimy również znaleźć funkcję, która wykona się tylko raz counter = 0 metod.

Potrzebujemy klucza (closure).

Klony w JavaScript

Pamiętasz samowystępującą funkcję? Co robi taka funkcja?

Przykład

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// Licznik jest obecnie 3

Spróbuj sam

Przykład wyjaśnienia

Zmienna add Przypisanie jest wartością zwróconą przez samowystępującą funkcję.

Ta samowystępująca funkcja działa tylko raz. Ustawia licznik na zero (0) i zwraca wyrażenie funkcji.

W ten sposób add stał się funkcją. Najbardziej „ekscytującą” częścią jest to, że może ona uzyskać dostęp do licznika w kontekście rodzicielskim.

To nazywa się JavaScript Klucz. To pozwala funkcji mieć "Prywatny”Zmienna staje się możliwa.

Licznik jest chroniony kontekstem tej anonimowej funkcji i można go modyfikować tylko za pomocą funkcji add.

Kluczem jest funkcja, która ma dostęp do kontekstu rodzicielskiego, nawet po zamknięciu funkcji rodzicielskiej.