Замыкания JavaScript
Переменные JavaScript могут принадлежать локальной или глобальной области видимости.
Глобальные переменные можно сделать локальными (приватными) с помощью замыканий .
Глобальные переменные
A functionможет получить доступ ко всем переменным, определенным внутри функции, например:
Пример
function myFunction() {
let a = 4;
return a * a;
}
Но a functionтакже может обращаться к переменным, определенным вне функции, например:
Пример
let a = 4;
function myFunction() {
return a * a;
}
В последнем примере a — это глобальная переменная.
На веб-странице глобальные переменные принадлежат объекту окна.
Глобальные переменные могут использоваться (и изменяться) всеми сценариями на странице (и в окне).
В первом примере a — локальная переменная.
Локальная переменная может использоваться только внутри функции, в которой она определена. Он скрыт от других функций и другого кода сценариев.
Глобальные и локальные переменные с одинаковыми именами являются разными переменными. Изменение одного не меняет другого.
Переменные, созданные без ключевого слова объявления ( var,
let, или const), всегда являются глобальными, даже если они созданы внутри функции.
Пример
function myFunction() {
a = 4;
}
Переменная продолжительность жизни
Глобальные переменные существуют до тех пор, пока страница не будет удалена, например, когда вы переходите на другую страницу или закрываете окно.
У локальных переменных короткая жизнь. Они создаются при вызове функции и удаляются после ее завершения.
Встречная дилемма
Предположим, вы хотите использовать переменную для подсчета чего-либо и хотите, чтобы этот счетчик был доступен для всех функций.
Вы можете использовать глобальную переменную и functionувеличить счетчик:
Пример
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3
В приведенном выше решении есть проблема: любой код на странице может изменить счетчик без вызова add().
Счетчик должен быть локальным для add()функции, чтобы предотвратить его изменение другим кодом:
Пример
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0
Это не сработало, потому что мы отображаем глобальный счетчик вместо локального.
Мы можем удалить глобальный счетчик и получить доступ к локальному счетчику, позволив функции вернуть его:
Пример
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 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();
// the counter is now 3
Объяснение примера
Переменной addприсваивается возвращаемое значение самовызывающейся функции.
Функция самовызова запускается только один раз. Он устанавливает счетчик на ноль (0) и возвращает функциональное выражение.
Таким образом, add становится функцией. «Замечательная» часть заключается в том, что он может получить доступ к счетчику в родительской области.
Это называется замыканием JavaScript. Это позволяет функции иметь " приватные " переменные.
Счетчик защищен областью действия анонимной функции и может быть изменен только с помощью функции добавления.
Закрытие — это функция, имеющая доступ к родительской области видимости даже после закрытия родительской функции.