Zamknięcie w JavaScript

Czym jest Closure i kiedy naprawdę możemy z niego skorzystać?

Aby zrozumieć Closure, musimy znać 2 proste pojęcia w JavaScript: funkcje zagnieżdżone i zwracanie funkcji.

Funkcje zagnieżdżone

W JavaScript możemy mieć funkcje zagnieżdżone. Funkcja wewnętrzna ma dostęp do zmiennych i parametrów funkcji zewnętrznej.

Sprawdźmy następujący przykład:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  displayMessage();
}

greetPerson('Alex'); // Hello Alex!

Zwracanie funkcji

Oprócz zadeklarowania i wywołania funkcji wewnętrznej wewnątrz funkcji zewnętrznej, możemy również zwrócić funkcję wewnętrzną, aby można ją było wywołać z zewnątrz.

Zobaczmy przykład tego:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  return displayMessage;
}

const displayMessageFunction = greetPerson('Alex');

console.log(typeof(displayMessageFunction)); // function
displayMessageFunction(); // Hello Alex!

Zamknięcie

Po zrozumieniu tych dwóch pojęć „definicja” domknięcia jest dość prosta.

Zamknięcie oznacza, że ​​funkcja wewnętrzna ma dostęp do zmiennych i parametrów swojej funkcji zewnętrznej nawet po powrocie funkcji zewnętrznej.

Zobaczmy inny przykład, w którym możemy dokładnie zobaczyć, jak można użyć domknięcia:

function counterFunction() {
 let counter = 0;

 function increaseCounter() {
  return counter += 1;
 }

 return increaseCounter;
}

// counter reffers to the increaseCounter returned by the counterFunction
const counter = counterFunction();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

Funkcja wewnętrzna nie przechowuje oddzielnej kopii zmiennej zewnętrznej, ale odwołuje się do zmiennej zewnętrznej. Innymi słowy, wartość counterwill ulegnie zmianie, jeśli zmienisz ją za pomocą funkcji inner.

Funkcja zewnętrzna counterFunctionzwraca również odwołanie do increaseCounterfunkcji wewnętrznej, więc kiedy ją wywołamy, rzeczywista wartość zmiennej counterzostanie zmieniona. W ten sposób możemy zobaczyć, że counterzmienna ma nową wartość przyrostową po każdym counter()wywołaniu.

Kiedy stosować zamknięcie?

Możemy użyć zamknięcia, aby osiągnąć enkapsulację w JavaScript. Można to osiągnąć, ukrywając szczegółową implementację. W ten sposób możemy tworzyć prywatne zmienne i funkcje.

Sprawdźmy poniższy przykład, w którym chcemy zahermetyzować niektóre dane, używając tylko funkcji i obiektów:

const counter = (function () {
  let privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  function increaseCounter() {
    changeBy(1);
  }

  function decreaseCounter() {
    changeBy(-1);
  }

  function decreaseCounter() {
    return privateCounter;
  }

  return { increaseCounter, decreaseCounter, getCounterValue };
})();

console.log(counter.getCounterValue()); // 0

counter.increaseCounter();
counter.increaseCounter();

console.log(counter.getCounterValue()); // 2

counter.decreaseCounter();

console.log(counter.getCounterValue()); // 1

Możemy kontrolować wartość licznika z zewnątrz, tylko przez wywołanie increaseCounteri decreaseCounter, a wartość możemy uzyskać przez wywołanie getCounterValuefunkcji, która zachowuje się jak getter.

W ten sposób jesteśmy w stanie symulować specyfikatory publici privateuzyskać dostęp oraz osiągnąć enkapsulację.

Jest to bardzo potężna koncepcja w tworzeniu oprogramowania, ponieważ zapobiega niezamierzonym modyfikacjom zmiennych i funkcji, które powinny pozostać prywatne.

To wszystko!

Dziękujemy za poświęcenie czasu na przeczytanie tego artykułu na temat zamykania w JavaScript. Mam nadzieję, że pomogło ci to lepiej zrozumieć tę ważną koncepcję i to, jak można ją wykorzystać do osiągnięcia enkapsulacji i tworzenia prywatnych zmiennych i funkcji!