Если вам сложно понять области действия в javascript, тогда этот блог предназначен для вас, и я объясню вам все о областях действия в javascript. После прочтения всего этого поста я чертовски уверен, что вы наверняка освоите области видимости в javascript.
Прежде чем разбираться в областях, давайте разберемся с несколькими основными концепциями javascript, которые связаны с областями.
Контекст выполнения
Давайте посмотрим на пример, чтобы понять более четко.
Это простой код, который при печати возвращает мое имя. Но это лучший пример для понимания контекста выполнения. Каждый раз, когда функция вызывается, создается контекст выполнения, как показано ниже.
Когда javascript видит скобку these (), которая является вызовом функции, он создает контекст выполнения и добавляет его в стек вызовов. Здесь вызывается sayMyName, поэтому javascript создает контекст выполнения sayMyName и добавляет его в стек вызовов, функция sayMyName вызывает функцию findName, и создается контекст выполнения для функции findName, которая добавляется в стек вызовов, наконец, вызывается printName, поэтому его выполнение контекст также добавляется в стек. Когда выполнение функции printName завершается возвратом имени, она извлекается из стека, а затем извлекается findName, а затем извлекается sayMyName.
Ниже показан пустой стек вызовов, когда весь контекст выполнения извлекается из стека.
Вышеупомянутый сценарий почти правильный, но не хватает одного глобального контекста выполнения.
Каждый раз, когда движок javascript запускает код, он создает глобальный контекст выполнения, в котором выполняется наш код. Глобальный контекст выполнения извлекается из стека, когда выполняется наша последняя строка кода. Что касается глобального контекста выполнения, мы можем сказать, что это первое, что вызывается механизмом javascript для вызова стека, и последний контекст выполнения, который будет извлечен из стека.
Самая важная строка, которую я хочу сказать, заключается в следующем: всякий раз, когда любой код выполняется, он выполняется внутри контекста выполнения.
Подведем итог тому, что мы узнали, когда код выполняется внутри механизма javascript, он предоставляет глобальный контекст выполнения, внутри которого выполняется дополнительный код, и когда мы запускаем функцию, создается новый контекст выполнения.
Лексическая среда
Лексическая среда означает, где вы пишете свой код, а не как он выполняется. Давайте посмотрим на пример
У каждого контекста выполнения есть собственная лексическая среда.
В контексте выполнения Global наша лексическая среда содержит функции findName и sayMyName.
Контекст выполнения findName имеет собственное лексическое окружение, которое содержит функцию printName
Контекст выполнения printName имеет собственное лексическое окружение, которое содержит функцию logMyName.
позвольте мне повторить, что лексическая среда определяет, где написан ваш код, и каждый контекст выполнения имеет свою собственную лексическую среду.
Переменная среда
Какие переменные находятся в контексте выполнения, определяется окружающей средой переменных. Все переменные, определенные в вашем коде, имеют выделение памяти в куче памяти, но то, какие переменные присоединены к контексту выполнения, определяется переменной окружением. Давайте посмотрим на пример.
В этом примере у нас есть переменная isValid в трех разных переменных окружения.
В строке 12 у нас есть переменная isValid со значением false в среде глобальной переменной. В строке 7 у нас есть переменная isValid со значением true в среде переменной «one» функции. В строке 2 у нас есть переменная isValid со значением undefined в среде переменной «two» функции.
Увидев значение console.log в выходных данных, вы можете понять, насколько важно понимать переменную среду.
Итак, к настоящему времени мы поняли, что такое контекст выполнения, лексическая среда, переменная среда. Это основная концепция, после того как мы очистим эти термины, мы сможем легко понять объемы. Теперь поговорим об объемах.
Область действия в Javascript
В javascript наша лексическая область видимости (доступные данные + переменная зависит от того, где была определена функция) определяет наши доступные переменные. Не там, где функция вызывается (динамическая область видимости)
Давайте посмотрим на пример, чтобы лучше это понять
В приведенном выше примере мы попытаемся понять область действия и цепочку областей видимости.
Поскольку мы знаем, что каждая функция имеет свой собственный контекст выполнения и переменную среду, давайте выделим это на примере
sayMyName: Это переменная среда имеет переменную 'a'
findName: это переменная среда имеет переменную "b"
printName: переменная среда имеет переменную "c"
В javascript всякий раз, когда мы хотим сначала получить доступ к переменной, он видит в своей собственной переменной среде, если ее там нет, тогда он итеративно просматривает среду родительской переменной, пока не найдет желаемую переменную.
Например, если мы хотим получить доступ к переменной ‘a’ внутри функции printName, как будет проходить выполнение, давайте посмотрим:
Сначала движок javascript будет искать в среде переменной printName, в которой его нет, затем он будет искать в среде родительской переменной printName, которая является средой переменной findName, в которой она не определена, затем он будет искать в среде родительской переменной findName, которая называется SayMyName переменная среда, которая имеет переменную, определенную в ее переменной среде, отсюда значение разрешается. Этот поиск в цепочке областей видимости переходит в среду глобальных переменных.
Теперь, когда мы разобрались со сферой и цепочкой масштабов, давайте обсудим еще одну важную тему.
Объем функции и область действия блока
Помните, что область видимости означает, к какой переменной у нас есть доступ, а javascript имеет область видимости функции, каждый раз, когда мы создаем функцию, мы создаем контекст выполнения, который имеет свою собственную среду переменных, из es6, область видимости блока, включенного в javascript. Область блока создается, когда он видит фигурные скобки ({}), например, if block, for block создает область блока. Давайте посмотрим на пример этого.
Здесь мы создали две функции loop и loopBlockScope. Функция цикла использует var в цикле for, и мы получаем доступ к ее значению вне цикла for как область видимости функции «var», и мы находимся внутри функции, поэтому ее значение будет напечатано. В loopBlockScope у нас та же логика, что и в функции цикла, за исключением того, что мы используем let, которая учитывает область действия блока, поэтому доступ к переменной за пределами области блока, как мы делаем в строке 14, вызовет ошибку.
Ключевой момент, который следует запомнить, это то, что var уважает область видимости функции, тогда как let и const уважают область видимости блока.
Я надеюсь, что вы поняли область видимости в javascript.
