Всем привет, в третьем выпуске Путешествие в центр JavaScript мы продолжаем с замыканиями. Мы начали с Примитивных типов и ссылочных типов в первой статье. Моя вторая статья была о Подъеме. Вы можете начать с этих статей, если вы их не читали. Надеюсь, вам понравится #SundayTechMusings на этой неделе :).
Третий блог на эту тему посвящен замыканиям. Сегодня я приведу один пример из моей повседневной работы в Jotform. Потому что это очень поучительно.
Прежде чем закрыть, я хочу дать краткую информацию о лексической области видимости.
Лексический охват
Лексическая область видимости является фундаментальной концепцией. Это помогает определить, какие и как переменные и функции доступны в разных частях кода. Проще говоря, лексическая область видимости — это способ, которым код JavaScript определяет область действия переменной или функции на основе ее расположения в блоке кода.
Прежде чем понять лексическую область видимости, давайте рассмотрим область действия. Область действия — это некоторый набор переменных и функций, доступных в определенной части кода. Область действия может быть глобальной или локальной. Глобальная область видимости относится к переменным или функциям, к которым вы можете получить доступ из всей вашей кодовой базы. Но локальная область видимости относится к переменным или функциям, которые доступны только в пределах определенного блока кода. Это важная часть для понимания разницы между var и const, let .
Итак, как же работает лексическая область видимости? В JavaScript, когда функция определена, она захватывает область, в которой она определена. Это означает, что функция может получить доступ к любым переменным или функциям, которые были определены в той же области видимости, а также к любым переменным или функциям, определенным в любых внешних областях.
В приведенном выше примере вывод консоли будет «Caglayan». Как я уже упоминал, вы можете получить доступ к внешним переменным из внутренних функций.
Область видимости с помощью let и const
Мдн говорит:
Традиционно (до ES6) в JavaScript было только два вида областей действия: область действия и глобальная область действия. Переменные, объявленные с помощью
var, относятся либо к функции, либо к глобальной области видимости, в зависимости от того, объявлены ли они внутри функции или вне функции. Это может быть сложно, потому что блоки с фигурными скобками не создают области видимости.
Мой искренний совет: не используйте var . Я упомянул об этом в своем блоге Подъем.
В приведенном выше коде вы можете подумать, что это вызовет ошибку. Но этого не будет. Это даст значение name в зависимости от условия. Потому что, в отличие от const и let , операторыvar создают глобальные переменные.
На этот раз он выдаст ошибку, потому что переменная let объявлена в области видимости функции. Извне мы не можем этого достичь.
Закрытие
Закрытие — это функция в JavaScript, которая позволяет функции получать доступ к переменным и параметрам из своей внешней функции (или родительской функции). Даже после того, как внешняя функция завершила выполнение и была удалена из стека вызовов (о чем вы можете узнать больше в моей следующей статье о цикле событий в JavaScript), внутренняя функция (или дочерняя функция) все еще может обращаться к этим переменным и использовать их. параметры.
Чтобы создать замыкание, нам нужно определить функцию внутри другой функции. Внутренняя функция имеет доступ к переменным в области действия внешней функции даже после возврата внешней функции.
В этом примере outerFunction принимает параметр x и возвращает innerFunction. innerFunction принимает параметр y и возвращает сумму x и y.
Когда мы вызываем outerFunction(5), он возвращает innerFunction, который мы сохраняем в переменной addFive. Когда мы затем вызываем addFive(3), он добавляет 3 к значению x, переданному в outerFunction, которое равно 5, и возвращает сумму 8.
Ключевым моментом, который нужно понять здесь, является то, что innerFunction имеет доступ к параметру x outerFunction, даже несмотря на то, что outerFunction завершил выполнение, а x больше не входит в область действия.
Мы можем использовать замыкания во многих сценариях, потому что это очень помогает. Например; при создании закрытых переменных и методов в объектно-ориентированном программировании или при управлении состоянием в функциональном программировании. Однако они также могут вызвать утечку памяти, если использовать их неосторожно, поскольку переменные и параметры внешней функции не удаляются сборщиком мусора даже после завершения выполнения функции.
Work-Life с использованием примера закрытия
Итак, это была часть определения, теперь я хочу привести пример своей работы, который упоминался в начале.
Если вы работали с внутренним поиском в своем приложении, вы знаете функцию debounce. Если нет, то можете посмотреть мою статью Debounce.
В функции debounce мы должны сохранить переменную timeout. Мы должны сохранить переменную тайм-аута во внешней функции, потому что, когда мы вызываем эту функцию каждый раз, она должна оставаться неизменной. Вот почему мы используем замыкания. Если мы не будем использовать замыкания, то каждый раз будем создавать новую функцию setTimeout и она будет работать некорректно.
Подводить итоги
замыкание очень полезно. Я считаю, что вы можете столкнуться с закрытием во многих предварительных интервью. Так что вы должны понять логику этого :)
Это была третья статья «Путешествия в центр JavaScript». Будут более продвинутые статьи по JavaScript и React, так что вы можете подписаться на меня :)
Увидимся на следующих #SundayTechMusings.
