Что такое замыкания в JavaScript и как они работают

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

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

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

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

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

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

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

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

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

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

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

Полный код:

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

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

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

Stack:

Chain:

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

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

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

Stack:

Chain:

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

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

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

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

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

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