Замыкания в JavaScript

27 November 2019
A full set of statistics will be available when the publication has over 100 views.

Доброго времени суток, друзья. Сегодня расскажу о замыканиях (Closures)в языке JavaScript на показательных примерах.

Начнем издалека. В арсенале Javascript присутствует понятие Scope (контекстов) - это зона видимости переменных в коде. Примером может служить функция с объявленной внутри переменной, к которой нельзя обратиться вне этой функции. Проведем параллель с файловой системой: существует папка с файлом, этот файл не виден вне папки, потому что у нее собственный scope.

Замыкания. Создадим функцию createFunction. Внутри инициализируем переменную и еще одну функцию. Переменную назовем yourName со значением по умолчанию ("Victor"), а затем создадим вторую функцию с названием showYourName.

function createFunction() {
  const yourName = 'Victor';

  function showYourName() {
  alert(yourName);
  };

  return showYourName;
};

Здесь внешняя функция createFunction хранит переменную и возвращает внутреннюю функцию. Вторая (внутренняя) функция будет выводить предупреждение со значением yourName. Теперь используем наше замыкание.

let saveBox = createFunction();
saveBox();

В результате выполнения кода увидим предупреждение с текстом "Victor".Как оно работает: JavaScript после вызова createFunction сохранил контекст вызова функции, т.е. сохранил ссылки на переменные,которые оказались доступны на момент вызова, чтобы они затем могли быть использованы при вызове saveBox. Это — замыкание. Данный функционал используется, когда нужно связать данные с функцией, которая обработает их позднее:

function sumNumbers(x) {
  function another(y) {
    return x + y;
  };

  return another;
};


let sumWithOne = sumNumbers(1);
console.log(sumWithOne(2)); 
// 3

Материал подготовлен специально для издания "Я - программист":

Автор: Виктор Рябков - Junior Fullstack Developer в Firefly labs

Редактор: Наконечный Павел

Копирование и цитирование материалов разрешено только с указанием активной гиперссылки на источник.