Лексическая область видимости, также известная как статическая область видимости, — это то, о чем вы много раз слышали в своем путешествии по JavaScript, и важно понимать, что именно это означает.
Если вы еще этого не сделали, не забудьте также прочитать мой пост об объявлениях переменных, чтобы понять, как работает область видимости, а также контекст выполнения, так как это поможет вам понять лексическую область видимости намного быстрее (что я также кратко объясняю здесь) .
Каков охват?
Область действия в JavaScript относится к доступности переменных или функций в различных частях кода. Части кода означают некоторый блок или часть кода, где существуют переменные или функции.
Представьте, что вы изменчивы. Ваша квартира, в которой вы живете, является вашим личным пространством. Область в доме, в котором вы живете, но за пределами вашей квартиры, также является другой областью, но это уже не только ваша область, поскольку различные переменные, как и вы, разделяют эту область (например, лифт). Другой областью действия, содержащей область здания или квартиру, может быть улица, на которой расположено здание. В результате масштаб вашей квартиры отделяется от масштаба улицы и что бы ни происходило в вашей квартире, остается в вашей квартире!
Другой простой пример — блок в блоке в блоке в блоке, где каждый блок имеет свою область действия.
Типы областей
Помните пример с коробкой в коробке в коробке? Самое первое поле в этом примере — это глобальная область действия, следующее поле внутри него — это область действия функции, а еще одно поле внутри второго поля — это область действия блока.
Каждое ключевое слово переменной действует по-разному в зависимости от области действия. Некоторые переменные по-прежнему могут быть доступны за пределами области, в которой они расположены, в то время как другие застряли внутри луча, и вы не можете получить к ним доступ за пределами их области.
Глобальный масштаб
Глобальная область — это верхняя область и место, где область начинается. Это среда, видимая для всех остальных частей кода. Например, когда вы начинаете создавать различные переменные в самом верху вашего файла .js, эти переменные становятся глобальными.
Объем функций
Область действия функции — это окружение функции. Когда внутри функции создается переменная, мы говорим, что она находится в области действия функции. Это означает, что доступ к этой переменной вне области видимости функции невозможен. Каждая функция также имеет локальную область видимости. Можно также иметь функцию внутри другой функции и в другой функции. Самая верхняя функция имеет свою область видимости, другая функция внутри тоже имеет свою область видимости, локальную область видимости, а третья функция внутри второй функции будет иметь свою локальную область видимости.
Область блока
Блочная область — это третья среда области, которая также не позволяет созданным переменным выходить за пределы своей области, пока эта переменная находится в блочной области.
Область блока — это код внутри условий if-else, операторов switch или циклов, таких как for и while.
Что такое цепочка областей?
Как следует из названия, цепочка областей видимости — это цепочка областей видимости! 🤡 Помните пример с функциями внутри функций? Допустим, мы пытаемся записать в console.log переменную внутри самой глубоко вложенной функции. Механизм JavaScript проверит локальную область, в которой был вызван журнал консоли. Он проверит локальную область видимости шляпы, если переменная там существует. Если его там нет, он поднимется к ближайшей функции и проверит наличие там переменной.
Если снова ничего не будет найдено, он поднимется к следующей верхней функции, если она есть, и проверит, есть ли нужная переменная. Этот процесс поиска называется цепочкой областей, поэтому это процесс «поиска» в цепочке областей, которые связаны друг с другом.
Давайте визуализируем, как именно область действия работает в приведенном выше коде.
В приведенном выше коде, когда мы вызываем parentFunction, внутри него объявляется переменная, а затем вызывается innerFunction. Внутри innerFuntion мы снова объявляем переменную и вызываем другую функцию, innerInnerFunction, где мы хотим, чтобы консоль регистрировала разные переменные. Первая консоль должна регистрировать переменную, объявленную в глобальной области видимости. Однако движок JavaScript не собирается брать переменную напрямую из глобальной области видимости. Сначала он проверит локальную область видимости и попытается найти ее там. Другими словами, он будет искать переменную в ближайшей области и только потом двигаться дальше. В нашем случае он будет двигаться вверх к следующей функции и искать там, затем снова двигаться вверх и снова искать, пока не достигнет глобальной области видимости и не найдет нужную нам переменную.
Точно такой же процесс произойдет во втором журнале консоли для parentFunctionVariable. Он будет продолжать подниматься вверх по области до тех пор, пока не найдет, где была создана эта переменная.
Что такое лексический объем?
Когда дело доходит до цепочки областей видимости, внутренняя функция всегда может получить доступ к области видимости своей функции, поэтому цепочка областей видимости может идти вверх — от дочерней функции к родительской.
Однако родительская функция может не иметь доступа к внутренней функции, поэтому область действия функции не может идти вниз, она всегда идет только вверх!
Этот процесс или способность функции иметь доступ к переменным родителя называется лексической областью видимости. Другими словами, внутренняя дочерняя функция всегда лексически связана со своим родителем и всегда может обращаться к его переменным.
Лексическая область в этом случае — это область, в которой целевые переменные были созданы, а не вызваны. Вы можете вызвать переменную в одном месте, но объявить ее в другом месте, например, в родительской функции.
Почему цепочка областей видимости не может идти вниз?
Как я уже упоминал, лексическая область видимости — это цепочка областей действия, идущая только вверх и вверх. Если вы уже читали о контексте выполнения, вы узнали, что когда мы создаем переменные, они сохраняются внутри объекта переменной, чтобы мы могли ссылаться на них для последующего использования. Кроме того, при создании переменных может быть два типа контекстов, в которых они сохраняются. Они либо сохраняются глобально, либо сохраняются в контексте выполнения функции. Контекст выполнения функции создается, когда вы создаете переменную внутри функции, поэтому каждая функция имеет свой собственный контекст.
Когда вы создаете переменные внутри функции, к ним не всегда можно получить доступ за ее пределами, поскольку они находятся в области действия функции.
Попробуйте проанализировать код выше и использовать предыдущий пример. Как вы думаете, что произойдет в этом случае, если мы попытаемся консольно логировать все переменные?
Что я изменил на этот раз, так это то, что у меня есть одна глобальная переменная, как и раньше, но я добавил еще две переменные в глобальную область видимости, которые также повторяются внутри функции. Затем я также пытаюсь вывести в консоль переменную, которую я создал внутри функции.
Попробуем понять, что здесь происходит. Когда мы пытаемся вызвать переменную журнала консоли, которая была объявлена вне функции, все работает нормально, однако, когда дело доходит до последнего журнала консоли, выдается ошибка. Почему? Потому что верхней области видимости нет, а нужная нам переменная находится внутри функции. Вот почему мы получаем ReferenceError.
Заключение
В заключение, лексическая область видимости в JavaScript относится к способности внутренней функции обращаться к переменным и функциям, определенным в ее внешней или родительской функции, но не наоборот. Это связано с тем, что цепочка областей действия может идти только вверх, от дочернего к родительскому, а не вниз. Внутренняя функция всегда лексически связана со своей родительской функцией, что позволяет ей обращаться к ее переменным и функциям, которые были объявлены в родительской области во время создания внутренней функции.
