Понимание замыканий в Javascript

Довольно распространенный вопрос на собеседовании по JS из-за его повсеместности.

Концепция Closures — одна из фундаментальных концепций Javascript, поскольку она встречается повсюду. Согласно веб-документам MDN (ссылка указана в справочных материалах), замыкание — это комбинация функции, объединенной вместе (вложенной) со ссылками на ее окружающее состояние (лексическое окружение/область действия). Другими словами, замыкание — это комбинация функции и лексического окружения, в котором эта функция была объявлена. В JavaScript замыкания создаются каждый раз, когда создается функция, во время создания функции. Несколько вещей, которые нужно распаковать здесь, в основном лексический объем. Понятие лексического охвата само по себе может быть вопросом интервью. Вот обширная статья, чтобы понять область видимости в целом и лексическую область видимости.Мы рассмотрим, что такое лексическая область видимости и какое отношение она имеет к замыканиям, когда будем рассматривать пример.

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

Во-первых, давайте посмотрим, что такое лексическая область видимости. Согласно статье, на которую я ссылался выше, Лексическая область видимости — это область определения выражения. Другими словами, лексическая область действия элемента — это место, в котором он был создан. Рассмотрите, например, переменную outerVariable. Лексическая область действия outerVariable — это место, где оно было создано, то есть outerFunc. Таким образом, лексическая область видимости outerVariable будет областью видимости функции outerFunc. Точно так же лексическая область видимости функции innerFunc также будет областью видимости функции outerFunc. Когда создается innerFunc, вместе с ним создается замыкание, которое дает innerFunc доступ ко всем свойствам в пределах его лексической области видимости. Поскольку outerVariable находится в лексической области действия innerFunc, к нему можно получить доступ внутри innerFunc.

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

Рассмотрим тот же пример с небольшим изменением.

Здесь вместо вызова innerFunc внутри outerFunc он возвращается. Теперь outerFunc возвращает innerFunc, а innerFunc пытается получить доступ к outerVariable, который присутствует в outerFunc. Проблема в теории в том, что мы больше не внутри outerFunc. Так что у нас не должно быть доступа к outerVariable. Вот тут и проявляется магия замыканий. func содержит ссылку на экземпляр функции innerFunc, поскольку innerFunc возвращается при выполнении outerFunc (строка № 11). Этот экземпляр innerFunc поддерживает ссылку на свое лексическое окружение, в котором существует переменная outerVariable. По этой причине при вызове func (строка № 13) переменная outerVariable остается доступной для использования.

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

ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА