Замыкания в JavaScript: Простое руководство с примерами

Замыкание — это простой концепт, если избегать сложной терминологии. По сути, это функция внутри другой функции. Рассмотрим, как это работает на примерах.

Возвращение функции из функции

Создадим функцию createFunc:

function createFunc() {
  let n = 1000;
  return function(num) {
    return n * num;
  };
}

Вызов createFunc() возвращает новую функцию. Запишем её в переменную:

let myFunc = createFunc();

myFunc — это функция, полученная из createFunc. Вызов myFunc(42) вернет 42000. Почему? Потому что, когда createFunc вызывалась, внутренняя функция имела доступ к переменной n, закрытой внутри createFunc. Это и называется замыканием: внутренняя функция «запоминает» переменные из внешней функции, даже после того, как внешняя функция завершила свою работу.

Инкрементатор

Создадим функцию createIncrementor, возвращающую функцию, которая прибавляет к переданному числу значение, «закрытое» внутри createIncrementor:

function createIncrementor(n) {
  return function(num) {
    return n + num;
  };
}

Создадим две функции с помощью createIncrementor:

let incOne = createIncrementor(1);
let incTen = createIncrementor(10);

incOne(10) вернет 11, а incTen(41) вернет 51. Каждая функция «запомнила» своё значение n.

Генератор ссылок

Создадим функцию urlGenerator, которая возвращает функцию для генерации ссылок с заданным доменом:

function urlGenerator(domain) {
  return function(url) {
    return `https://${url}.${domain}`;
  };
}

Создадим функции для разных доменов:

let genCom = urlGenerator('com');
let genRu = urlGenerator('ru');

genCom(‘google’) вернет https://google.com, а genRu(‘yandex’) — https://yandex.ru. urlGenerator «закрыла» в возвращаемых функциях доменное имя.

Собственная реализация функции bind

Напишем собственную реализацию функции bind:

function bind(context, fn) {
  return function(...args) {
    return fn.apply(context, args);
  };
}

Эта функция принимает контекст и функцию, а возвращает новую функцию, которая вызывает переданную функцию с указанным контекстом и произвольным количеством аргументов. Это демонстрирует использование замыканий для сохранения контекста.

Замыкания — мощный инструмент в JavaScript, позволяющий создавать функции, «запоминающие» свои значения из лексического окружения. Это позволяет создавать гибкие и повторно используемые функции, эффективно управляя контекстом и данными.