Closures, domknięcia – JavaScript

Closures, domknięcia – JavaScript

Domknięcia (ang. Closures) w JavaScript, co to jest, po co to jest i kiedy używamy, na te pytania postaram się odpowiedzieć. Closures, domknięcia – JavaScript zapraszam 🙂

Co to jest Closures

Jest to nic innego jak stworzenie jednej funkcji wewnątrz drugiej. Funkcja wewnętrzna ma dostęp do zmiennych własnych oraz do zmiennych rodzica.

var zmiennaGlobalna = 9;

function rodzic() {
  var zmiennaRodzica = 1;

  function potomekDomkniecie() {
    var zmiennaPotomka = 2;

    console.log(zmiennaRodzica); // 1
    console.log(zmiennaPotomka); // 2
    console.log(zmiennaGlobalna); // 9
  }
  return potomekDomkniecie;
}

var fooRodzic = rodzic();
fooRodzic();

Na podstawie powyższego przykładu mamy dowód na to, że potomekDomkniecie() ma dostęp do zmiennych własnych, zmiennych rodzica. Jeżeli istnieją zmienna globalne wtedy potomekDomkniecie() również ma do nich dostęp.

Rodzic nie ma za to dostępu do zmiennych potomka, ale ma dostęp do zmiennych globalnych.

var zmiennaGlobalna = 9;

function rodzic() {
  var zmiennaRodzica = 1;
  console.log(zmiennaGlobalna); //9
  console.log(zmiennaPotomka); // ReferenceError: zmiennaPotomka is not defined
  // na powyższym błędzie skrypt przestaje wykonywać się dalej.
  
  function potomekDomkniecie() {
    var zmiennaPotomka = 2;

    console.log(zmiennaRodzica); 
    console.log(zmiennaPotomka);
  }
  return potomekDomkniecie;
}

var fooRodzic = rodzic();
fooRodzic();

Po co to jest

Aby mieć możliwość stworzenia coś na kształt zmiennych prywatnych. Wszystko po to, aby do zmiennej był ograniczony dostęp.

Kiedy używamy

Poniższy kod przedstawia jak używać domknięcia do zdefiniowania publicznej funkcji, która ma dostęp do prywatnych funkcji i zmiennych. Tego typu używanie domknięć znane jest jako „module pattern”:

var licznik = (function() {
  var prywatnyLicznik = 0;
  function zamien(val) {
    prywatnyLicznik += val;
  }
  return {
    rosnij: function() {
      zamien(1);
    },
    malej: function() {
      zamien(-1);
    },
    value: function() {
      return prywatnyLicznik;
    }
  };   
})();

console.log(licznik.value()); // logs 0
licznik.rosnij();
licznik.rosnij();
console.log(licznik.value()); // logs 2
licznik.malej();
console.log(licznik.value()); // logs 1 

A teraz uwaga tłumaczę i objaśniam, zmienna licznik jest przypisana do wartości, którą zwraca samo wykonująca się funkcja(IIFE).
Immediately Invoked Function Expression(IIFE) uruchamia się raz. Ustawia prywatnyLicznik na zero (0), i zwraca wyrażenie funkcji. W taki sposób licznik staję się funkcją. Tego typu zabieg nazywamy domknięcia (ang. closures) w JavaScript. Pozwala na stworzenie funkcji, która posiada zmienną prywatną.

Dla lepszej skalowalności możemy odseparować zmienna licznik, tworząc stworzLicznik i użycia ich do wieli liczników.

var stworzLicznik = function() {
  var prywatnyLicznik = 0;
  function zamien(val) {
    prywatnyLicznik += val;
  }
  return {
    rosnij: function() {
      zamien(1);
    },
    malej: function() {
      zamien(-1);
    },
    value: function() {
      return prywatnyLicznik;
    }
  };   
};

var licznik1 = stworzLicznik();
var licznik2 = stworzLicznik();
console.log(licznik1.value()); // 0 
licznik1.rosnij();
licznik1.rosnij();
console.log(licznik1.value()); // 2
licznik1.malej();
console.log(licznik1.value()); // 1
console.log(licznik2.value()); // 0

Teraz mamy dwa liczniki, które są odseparowane i niezależne od siebie. Każde domknięcie posiada swoją referencję do zmiennej prywatnyLicznik, dzięki temu oba liczniki mogą mieć różny stan.

Podsumowanie

Closures, domknięcia – JavaScript, czyli mechanizm tworzenia zmiennych prywatnych z ograniczonym dostępem tak w skrócie można by podsumować działanie Closures, domknięcia – JavaScript.

 
Pozdro 🙂