Что такое замыкания в JavaScript и как их писать?

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

Что такое закрытия?

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

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

Что такое лексическая среда?

Лексическая среда - это локальная память вместе с ее родительской средой. Посмотрите пример, приведенный ниже, и угадайте вывод следующего кода:

function external () { 
 пусть a = 10;





instagram viewer


 console.log (у);
 внутренний();
 function inner () {
 console.log (а);
 console.log (у);
 }
}
пусть y = 9;
внешний ();

Выход будет 9, 10, 9. Внутренняя функция имеет доступ к переменным своего родителя, внешний () функция. Следовательно внутренний() функция может получить доступ переменная a. В внутренний() функция может также получить доступ переменная y из-за концепции цепочка областей видимости.

Родитель внешней функции является глобальным, а родительский элемент внутренний() функция - это внешний () функция. Следовательно внутренний() функция имеет доступ к переменным своих родителей. Если вы попытаетесь получить доступ к переменной а в глобальной области будет отображаться ошибка. Следовательно, можно сказать, что внутренний() функция лексически находится внутри внешний () функция и лексический родитель внешний () функция глобальная.

Объяснение примеров закрытия JavaScript

Поскольку вы узнали о лексической среде, вы можете легко угадать вывод следующего кода:

function a () {
 пусть x = 10;
 function b () {
 console.log (х);
 }
 б ();
}
а ();

На выходе 10. Хотя с первого взгляда вы можете не догадаться, это пример закрытия в JavaScript. Замыкания - это не что иное, как функция и их лексическая среда.

Рассмотрим пример, где есть три функции, вложенные друг в друга:

function a () { 
 пусть x = 10;
 function b () { 
 function c () {
 function d () {
 console.log (х);
 }
 d ();
 }
 c ();
 }
 б ();
}
а ();

Будет ли это еще называться закрытием? Ответ: да. Опять же, замыкание - это функция со своим лексическим родителем. Лексический родитель функции d () является c (), и из-за концепции цепочки областей видимости функция d () имеет доступ ко всем переменным внешних и глобальных функций.

Взглянем на еще один интересный пример:

function x () {
 пусть a = 9;
 return function y () {
 console.log (а); 
 }
}
пусть b = x ();

Вы можете вернуть функцию внутри функции, назначить функцию переменной и передать функцию внутри функция в JavaScript. В этом красота языка. Можете ли вы угадать, каким будет результат, если вы напечатаете переменную б? Он напечатает функцию у (). Функция Икс() возвращает функцию у (). Следовательно, переменная б хранит функцию. Теперь вы можете догадаться, что произойдет, если вы вызовете переменную б? Он печатает значение переменной а: 9.

Вы также можете добиться сокрытия данных с помощью замыканий. Для лучшего понимания рассмотрим пример с кнопкой с идентификатором «button» в браузере. Прикрепим к нему прослушиватель событий щелчка.

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

1. Создайте счетчик глобальной переменной и увеличивайте его по щелчку. Но у этого метода есть недостаток. Внести изменения в глобальные переменные легко, потому что они легко доступны.

   Нажми на меня
   
   

2. Мы можем добиться сокрытия данных с помощью замыканий. Вы можете обернуть весь addEventListener () функция внутри функции. Это закрытие. И после создания закрытия вы можете создать счетная переменная и увеличивайте его значение onclick. Используя этот метод, переменная останется в функциональная сфера, и никакие изменения не могут быть сделаны.

   Нажми на меня
   
   

Связанный: Скрытый герой веб-сайтов: понимание DOM

Почему закрытия важны?

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

Рассмотрим этот пример композиции функций:

const multiply = (a, b) => a * b;
const multiplyBy2 = x => multiply (10, x);
console.log (multiplyBy2 (9));

Мы можем реализовать тот же пример, используя замыкания:

const multiply = function (a) {
 return function (b) {
 вернуть а * б
 }
}
const multiplyBy2 = умножить (2);
console.log (multiplyBy2 (10))

Функции могут использовать замыкания в следующих сценариях:

1. Для реализации каррирования функций
2. Используется для сокрытия данных
3. Для использования с прослушивателями событий
4. Для использования в методе setTimeout ()

Не следует использовать замыкания без надобности

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

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

Вот пример, который показывает, как переменные внутри замыканий не будут собираться мусором.

 function f () {
 const x = 3;
 return function inner () {
 console.log (х);
 }
 }
 f () ();

В переменная x здесь потребляет память, даже если она не используется часто. Сборщик мусора не сможет освободить эту память, потому что она находится внутри закрытия.

JavaScript бесконечен

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

Введение в итераторы и генераторы в JavaScript

Освойте методы итератора и генератора в JS.

Читать далее

Об авторе