Чем замыкание отличается от лексической области видимости в Javascript.

В Javascript часто используется смешение концепций замыкания и лексической области действия.

Однако важно отметить, что замыкание и лексическая область видимости — это две взаимосвязанные, но разные концепции в JavaScript. Лексическая область действия на самом деле является важным компонентом замыкания, как мы рассмотрим позже.

Необходимые условия для понимания этой темы.
1) Концепция функций в Javascript.
2) Концепция области действия (область действия блока и область действия функции).

Я надеюсь, что после прочтения этой статьи мы поймем следующие концепции.
1) Разница между замыканием и лексической областью видимости.
2) Как мы можем объяснить концепции замыкания и лексической области видимости в интервью через пример
3) Почему замыкания требуют лексической области видимости.

Итак, что такое концепция лексической области видимости в Javascript?

Лексическая область действия охватывает все, к чему может получить доступ определенная функция.

// scope global
var a = 1;
void function one(){
  // scope [one]
  // lexical scope [one , global]
  var b = 2;

  void function two(){
    // scope [two]
    // lexical scope [one , two , global]
    var c = 3;

    void function three(){
      // scope [three]
      // lexical scope [one , two , three , global]
      var d = 4;
      console.log(a + b + c + d);
    }();
  }();
}();

В данном примере определяются и немедленно вызываются три функции, шаблон, который часто называют IIFE (Выражение немедленно вызываемой функции).

В первой функции ее лексическая область действия охватывает как собственную область действия, так и глобальную область действия. Точно так же лексическая область второй функции охватывает области действия первой, второй и глобальной области.

Итак, какова концепция Clouser в Javascript?

Clouser — это функция, которая помогает определенной функции получить доступ ко всему, что находится между ней и глобальной областью видимости, даже после закрытия родительской и, прежде всего, всех функций.

Здесь в определении у нас есть две части. Первая часть относится к лексической области, но вторая часть важна для понимания концепции закрытия.

const parentFunction = () => {
     let a = 2;
     console.log(a);

     const childFunction = () => {
          console.log(a += 1);
     }

     return childFunction;
}

const result = parentFunction();  // Line 1
console.log(result);              // Line 2
result();                         // Line 3

Давайте разберем приведенный выше пример, чтобы понять его шаг за шагом.
1) После выполнения строки 1 устанавливается область действия parentFunction, что приводит к печати 2 в консоли. После этого parentFunction возвращает childFunction и область действия функции завершается и впоследствии закрывается.

До этого момента понимание является точным и очевидным.

Теперь мы знаем, что после завершения выполнения parentFunction его область действия закрывается. Следовательно, когда мы вызываем result(), мы, по сути, вызываем анонимную функцию, назначенную childFunction. Эта функция сохраняет доступ к переменной (a) внутри parentFunction, даже если parentFunction уже завершена и ее область действия закрыта.

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

Сводка

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

Если вы нашли эту статью полезной, пожалуйста, выразите свою признательность, хлопнув в ладоши.