Что такое Закрытие?

Как разработчик JavaScript, вы, возможно, уже слышали о замыканиях, но не совсем уверены, что это такое и как они работают. В этой статье мы подробнее рассмотрим замыкание и объясним его простыми словами.

Позвольте мне запутать вас этим кодом,

const length = 4;
const fns = [];
const fns2 = [];
for (var i = 0; i < length; i++) {
 fns.push(() => console.log(i));
}
for (let i = 0; i < length; i++) {
 fns2.push(() => console.log(i));
}
fns.forEach(fn => fn()); // => 4 4 4 4
fns2.forEach(fn => fn()); // => 0 1 2 3

Вы ожидали такое же сообщение в консоли этого кода выше?

Закрытие — это сохранение переменной среды даже в том случае, если переменная уже изменена или собран мусор. В приведенном выше примере разница заключается в объявлении переменной, где первый loop использует var, а второй цикл использует let. var является областью действия функции, поэтому, когда она объявлена ​​внутри блока цикла for, var рассматривается как глобальная переменная, а не как внутренняя переменная блока. С другой стороны, let — это блочная переменная, похожая на объявление переменной в других языках, таких как Java и C++.

В этом случае закрытие происходит в переменной let. Каждая из функций, помещенных в массив fns2, запоминает текущее значение переменной, независимо от того, будет ли переменная изменена в будущем. Напротив, fns не запоминает текущее значение переменной, он использует будущее или конечное значение переменной global. Из-за этого он печатает 4,4,4,4.

Замыкание создается, когда функция определена внутри другой функции, и внутренняя функция имеет доступ к переменной и параметрам внешней функции. Другими словами, внутренняя функция «закрывает» окружающую среду внешней функции.

Закрытие: Понимание того, как функция сохраняет свои воспоминания.

Давайте рассмотрим пример, чтобы было понятнее:

function outer() {
  let name = "John";
  
  function inner() {
    console.log(name);
  }
  
  return inner;
}

let result = outer();
result(); // outputs "John"

В этом примере у нас есть внешняя функция, которая определяет переменную с именем name, и внутренняя функция, которая записывает значение этой переменной в консоль. Внешняя функция возвращает внутреннюю функцию, которую мы сохранили в переменной с именем result. наконец, мы вызываем result() для выполнения функции inner.

Когда мы вызываем result(), он выводит «Джон» на консоль. Но почему? Переменная name определена внутри внешней функции, так как же внутренняя функция может получить к ней доступ?

Ответ заключается в том, что внутренняя функция имеет доступ к переменной name через замыкание. Когда вызывается внешняя функция и определяется name, создается новое замыкание, включающее переменную name. Затем это замыкание возвращается, когда внешняя функция возвращает внутреннюю функцию. В результате, когда мы вызываем result(), он выполняет внутреннюю функцию в контексте замыкания, включающего переменную name.

Замыкания могут быть очень полезны в программировании на JavaScript. Они позволяют создавать частные переменные и функции, скрытые от глобальной области видимости. Это может помочь предотвратить конфликты имен и сделать ваш код более модульным.

В заключение, замыкание создается, когда функция определена внутри другой функции, и внутренняя функция имеет доступ к переменным и параметрам внешней функции. Замыкания — это мощная функция JavaScript, которая может помочь вам писать более модульный и удобный для сопровождения код. Желаю вам теперь иметь некоторое представление и лучшее понимание закрытия, читать дальше !!!