Замыкание функций в JavaScript
На этом уроке мы разберем, что такое замыкание функции, простыми словами. Если коротко, то замыкание - это функция внутри другой функции. И правда, звучит очень просто, но без привязки к конкретной задачи, понятие "замыкание" так и останется пустым звуком. Я просто хочу знать, в каких случаях мне нужно применять эту технологию.
Замыкание и область видимости
Так или иначе, но все эти пляски с бубном вокруг замыканий, напрямую связаны с областью видимости. Все переменные созданные внутри функции, являются локальными. А переменные созданные вне функции - глобальными.
Пример функции с локальными переменными
function one() {
let a = 10;
return a * 10;
}
// Вызов функции
console.log(one()); // 100
Локальная переменная видна только внутри блока, в котором она объявлена. Если мы попытаемся обратиться к локальной переменной вне этого блока, то гарантированно получим ошибку. Поскольку переменная не находится в области видимости данной функции.
function one() {
let a = 10;
return a * 10;
}
// Вывод переменной
console.log(a); // a is not defined
Пример функции c глобальными переменными
let a = 10;
function one() {
return a * 10;
}
console.log(a); // 10
console.log(one()); // 100
Совсем иначе дело обстоит с глобальными переменными, объявленными за пределами блока. Глобальные переменные доступны в любом месте в данном коде.
В чем подвох?
Драма состоит в том, что когда код разрастается или над ним работает несколько человек, становится тяжелее отслеживать логику глобальных и локальных переменных. Сейчас объясню на примере.
let a = 10;
function one() {
let a = 15;
return a * 10;
}
console.log(a); // 10
console.log(one()); // 150
В консоли вывелась глобальная переменная с числом 10 (так и должно быть), но обратите внимание на число 150, в данном математическом расчете уже участвовала локальная переменная a, с числом 15. Переменные внутри функции живут в тот момент, когда используется в вычислениях или вызывается эта функция. Как только функция one() прекратила свое существование, локальная переменная a просто исчезла. При таких условиях, нарушается работа счётчика.
let a = 0;
function one() {
a = a + 1;
return a;
}
console.log(one()); // 1
console.log(one()); // 2
console.log(one()); // 3
Вроде все хорошо, счетчик работает корректно, но есть в этом коде одно слабое место - глобальная переменная a, к которой обращается функция. Проблема в том, что объявленная глобальная переменная, оторвана от функции. Например какой-нибудь программист переопределит глобальную переменную, не заметив её связи со счетчиком. Тогда нарушится работа счетчика, ведь все функции имеют доступ к глобальным переменным. Получается, что глобальная переменная беззащитна. Так вот, для защиты глобальных переменных и были придуманы замыкания.
Пример замыканий
Замыкания делают код безопаснее, защищают его от нежелательных переопределений глобальных переменных. Сделаем такую хитрость,поместим функцию one() внутри другой функции wrap(). Это даст следующее: Когда будет вызвана функция wrap(), JavaScript создаст переменную a внутри функции wrap() и эта переменная не прекратит свое существование. Таким образом мы получим несколько экземпляров области видимости, внутри которых существуют свои переменные a.
function wrap() {
let a = 0;
return function() {
a = a + 1
return a;
}
}
В момент вызова wrap(), в JavaScript создается блок видимости, внутри которого функция видит внешние по отношению к себе переменные. И никто другой, кроме этой функции, не имеет доступа к переменным и не может их изменить. А все потому, что переменные одной области видимости замкнуты внутри другой области видимости. Отсюда и происходит название - замыкание. Мы получаем возможность делать переменные, которые недоступные никому, кроме функций.
Как определить где необходимо замыкание?
Замыкания активно используются для создания счетчиков. Если вам нужна переменная, к которой никто больше не будет иметь доступа, то замыкание - это то, что вам нужно.
-
Создано 13.11.2020 10:02:51
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.