Сегодня мы разберём что же такое замыкания в JavaScript и как они работают. Это тема, в которой теряются не только новички, но и даже более опытные разработчики. Поэтому предлагаю разобрать её детально.

Пример работы замыканий

Введём сначала функцию высшего порядка changeBalance(). Это функция, которая возвращает другую функцию:

function changeBalance() {}

Внутри объявим переменную balance, которая изначально будет равна 0:

function changeBalance() {
    let balance = 0;
}

И вернём из этой функции новую анонимную функцию, в которую мы передадим аргументом sum и в результате изменим balance на эту сумму:

function changeBalance() {
    let balance = 0;
    return function(sum) {
        balance += sum;
    }
}

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

Создадим константу change, которая будет вызовом функции changeBalance(). change теперь станет функцией, которую мы описали выше. То есть функцией, которая примет sum и поменяет balance:

const change = changeBalance();

Давайте теперь посмотрим на её поведение, когда попытаемся вызвать эту функцию. Чтобы посмотреть на результат после изменения баланса выведем его в консоль:

function changeBalance() {
    let balance = 0;
    return function(sum) {
        balance += sum;
        console.log('Баланс: ${balance}') // вывод в консоль
    }
}

Посмотрим что же будет происходить. Вызываем change и передаем ей параметры:

change(100);
change(-50);
change(200);

Вывод в консоль:

Баланс: 100
Баланс: 50
Баланс: 250

И вот тут начинает работать замыкание. Несмотря на то, что мы уже вернули функцию и она находится в глобальном контексте, мы все равно можем изменять внутри переменную balance. И более того, от вызова к вызову, наш баланс сохраняется и мы можем его менять.

Теперь на этом примере детально рассмотрим как все это работает по шагам. И как раз поймем где же находится это замыкание и что это.

Полный код:

function changeBalance() {
    let balance = 0;
    return function(sum) {
        balance += sum;
        console.log('Баланс: ${balance}')    
    }
}

const change = changeBalance();
change(100);
change(-50);
change(200);

Пошаговая работа замыканий

В рамках первого шага, в глобальном scope лежит функция changeBalance и константа change, а stack содержит только глобальный контекст.

Теперь начинаем исполнять код: объявляем функцию и переходим к выполнению функции changeBalance():

function changeBalance() {
    let balance = 0;
    return function(sum) {
        balance += sum;
        console.log('Баланс: ${balance}')    
    }
}

const change = changeBalance();

Что происходит на stack? Когда начинаем выполнять функцию в неё помещается changeBalance():

Stack

• changeBalance()
• global

Chain

• Global → changeBalance

То есть эта функция при выполнении объявляет баланс и возвращает новую функцию. На этом исполнение changeBalance() заканчивается.

С точки зрения scope у нас есть scope под названием changeBalance, в котором определен balance. Две вещи, которые изменились: на stack поместился changeBalance() и в scope появился changeBalance - дочерний scope относительно глобального.

Теперь перейдем к шагу три, где мы уже вызываем наш change():

Stack

• change()
• global

Chain

• Global → changeBalance
• Global → change

И тут появятся вопрос, что change никак не сможет достучаться до balance в changeBalance, потому что они находятся на одном уровне. Так почему все ещё можно изменить баланс? На самом деле он не меняет balance в changeBalance. Он меняет balance, который находится в рамках нашего замыкания. По сути, когда мы вызываем change, он как бы носит за собой контекст своего создания, и, когда происходит вызов функции, он знает что balance в нём есть. Это фактически дополнительная переменная scope, которая у него присутствует. Вот эта связь, которая реализуется внутренними механиками JavaScript и называется замыканием.

При этом, в отличие от объявлений функции, замыканиями мы никак сами управлять не можем. Это механика, которая просто работает под капотом. Более того, извне мы никак до переменной balance достучаться не сможем. Единственный, кто имеет к ней доступ - это change.

Что же такое замыкание?

Замыкание - это комбинация функции и лексического окружения, в котором эта функция была определена.

Простыми словами: функция помнит в каком контексте она была создана и может его использовать.

changeBalance является лексическим окружением, она становится неразрывной частью change.

В дальнейшем попробуем сделать еще один change и поймем, что к нему привяжется уже новый, свой changeBalance, который будет не связан с первым change.

При этом важно понимать и помнить, что замыкание всегда имеет более высокий приоритет по сравнению с переменными родительских scope. Если мы в глобальных переменных объявим еще один balance, то он изменён не будет, потому что первостепенно функция change посмотрит своё замыкание, и, если есть в этом замыкании такая переменная, она будет изменена. Если нет, то она пойдет по цепочке искать этот balance во вне.