JavaScript Закрытие (замыкание)
Переменные JavaScript могут принадлежать к локальной или глобальной области.
Глобальные переменные можно сделать локальными (частными) с помощью закрытия.
Глобальные переменные
function может получить доступ ко всем переменным, определенным внутри функции, например:
Но function также может обращаться к переменным, определенным вне функции, например:
В последнем примере a - это глобальная переменная.
На веб-странице глобальные переменные принадлежат объекту окна.
Глобальные переменные могут использоваться (и изменяться) всеми скриптами на странице (и в окне).
В первом примере a - это локальная переменная.
Локальную переменную можно использовать только внутри функции, в которой она определена. Она скрыта от других функций и другого скриптового кода.
Глобальные и локальные переменные с одинаковыми именами - это разные переменные. Изменение одного не изменяет другого.
Переменные, созданные без объявления ключевых слов (var, let или const) всегда глобальны, даже если они созданы внутри функции.
Продолжительность жизни переменной
Глобальные переменные действуют до тех пор, пока страница не будет удалена, например, когда вы переходите на другую страницу или закрываете окно.
Локальные переменные недолговечны. Они создаются при вызове функции и удаляются по завершении функции.
Дилемма счетчика
Предположим, вы хотите использовать переменную для подсчета чего-либо и хотите, чтобы этот счетчик был доступен для всех функций.
Вы можете использовать глобальную переменную и function для нарастания счётчика:
Пример
// Инициировать счетчик
let counter = 0;
// Функция увеличения счетчика
function add() {
counter += 1;
}
// вызвать add() 3 раза
add();
add();
add();
// Счетчик теперь должен быть 3
Попробуйте сами »
С указанным выше решением есть проблема: любой код на странице может изменить счетчик без вызова add().
Счетчик должен быть локальным для функции add() чтобы не допустить его изменения другим кодом:
Пример
// Инициировать счетчик
let counter = 0;
// Функция увеличения счетчика
function add() {
let counter = 0;
counter += 1;
}
// Вызвать add() 3 раза
add();
add();
add();
// Теперь счетчик должен быть 3. Но он равен 0.
Попробуйте сами »
Это не сработало, потому что мы отображаем глобальный счетчик вместо локального.
Мы можем удалить глобальный счетчик и получить доступ к локальному счетчику, позволив функции вернуть его:
Пример
// Функция увеличения счетчика
function add() {
let counter = 0;
counter += 1;
return counter;
}
// Вызвать add() 3 раза
add();
add();
add();
// Теперь счетчик должен быть 3. Но он равен 1.
Попробуйте сами »
Это не сработало, потому что мы сбрасывали локальный счетчик каждый раз, когда вызываем функцию.
Внутренняя функция JavaScript может решить эту.
Вложенные JavaScript функции
Все функции имеют доступ к глобальной области видимости.
Фактически, в JavaScript все функции имеют доступ к области "выше" их.
JavaScript поддерживает вложенные функции. Вложенные функции имеют доступ к области "выше" их.
В этом примере внутренняя функция plus() имеет доступ к переменной counter в родительской функции:
Пример
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}
Попробуйте сами »
Это могло бы решить дилемму счетчика, если бы мы могли достичь функции plus() извне.
Нам также нужно найти способ выполнить counter = 0 только один раз.
Нам нужно закрытие.
JavaScript Закрытия (Замыкания)
Помните самозапускающиеся функции? Что делает эта функция?
Пример
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// счетчик теперь 3
Попробуйте сами »
Объяснение примера
Переменная add присваивается возвращаемому значению функции с автоматическим запуском.
Самозапускающаяся функция запускается только один раз. Он устанавливает счётчик на ноль (0) и возвращает выражение функции.
Таким образом add (добавление) становится функцией. Но "замечательно" то, что она может получить доступ к счётчику в родительской области.
Это называется закрытием JavaScript. Это позволяет функции иметь "частные" переменные.
Счетчик защищен областью действия анонимной функции и может быть изменен только с помощью функции add (добавления).
Закрытие (замыкание) - это функция, имеющая доступ к родительской области, даже после того, как родительская функция закрылась.
