W tym samouczku dowiesz się o domknięciach JavaScript na podstawie przykładów.
Zanim nauczysz się o domknięciach, musisz zrozumieć dwa pojęcia:
- Zagnieżdżona funkcja
- Zwracanie funkcji
Zagnieżdżona funkcja JavaScript
W JavaScript funkcja może również zawierać inną funkcję. Nazywa się to funkcją zagnieżdżoną. Na przykład,
// nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John
W powyższym programie greet()funkcja zawiera znajdującą się w niej displayName()funkcję.
Zwracanie funkcji
W JavaScript możesz także zwrócić funkcję w ramach funkcji. Na przykład,
function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function
Wynik
function displayName () (console.log ('Cześć' + '' + name);) Cześć John
W powyższym programie greet()funkcja zwraca displayNamedefinicję funkcji.
Tutaj zwracana definicja funkcji jest przypisywana do zmiennej g1. Kiedy drukujesz g1 używając console.log(g1), otrzymasz definicję funkcji.
Aby wywołać funkcję przechowywaną w zmiennej g1, używamy g1()nawiasów.
Zamknięcia JavaScript
W JavaScript closure zapewnia dostęp do zewnętrznego zakresu funkcji z wnętrza funkcji wewnętrznej, nawet po zamknięciu funkcji zewnętrznej. Na przykład,
// javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value
Wynik
function displayName () (// dostęp do zmiennej name return 'Hi' + '' + name;) Cześć John
W powyższym przykładzie, gdy greet()wywoływana jest funkcja, zwraca definicję funkcji displayName.
Tutaj g1jest odniesienie do displayName()funkcji.
Gdy g1()jest wywoływana, nadal ma dostęp do greet()funkcji.
Po uruchomieniu console.log(g1)zwraca definicję funkcji.
Koncepcja zamknięcia istnieje dla innych języków programowania, takich jak Python, Swift, Ruby itp.
Spójrzmy na inny przykład.
// closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8
W powyższym programie calculate()funkcja przyjmuje pojedynczy argument xi zwraca definicję multiply()funkcji funkcji. multiply()Funkcja przyjmuje jeden argument yi powraca x * y.
Obie multiply3i multiply4są zamknięciami.
calculate()Funkcja nazywana jest przekazanie parametru x. Kiedy multiply3i multiply4są wywoływane, multipy()funkcja ma dostęp do przekazanego argumentu x calculate()funkcji zewnętrznej .
Prywatność danych
Zamknięcie JavaScript pomaga w ochronie danych programu. Na przykład,
let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4
W powyższym przykładzie sum()funkcja zwraca definicję increaseSum()funkcji funkcji.
Zmienna a jest zwiększana wewnątrz increaseSum()funkcji. Jednak wartość zmiennej a można zmienić również poza funkcją. W tym przypadku a = a + 1;zmienia wartość zmiennej poza funkcją.
Teraz, jeśli chcesz, aby zmienna a była zwiększana tylko wewnątrz funkcji, możesz użyć zamknięcia. Na przykład,
function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5
W powyższym przykładzie sum()funkcja ustawia wartość a na 0 i zwraca increaseSum()funkcję.
Ze względu na zamknięcie, mimo że sum()jest już wykonane, increaseSum()nadal ma dostęp do a i może dodać 1 do a przy każdym x()wywołaniu.
Zmienna a jest prywatną sum()funkcją. Oznacza to, że zmienna a jest dostępna tylko wewnątrz sum()funkcji.
Nawet jeśli ją zadeklarujesz ai użyjesz, nie wpłynie to na azmienną wewnątrz sum()funkcji.
Uwaga : zasadniczo zamknięcia służą do ochrony danych.
