Каждый контекст выполнения имеет переменную среду, цепочку областей видимости и ключевое слово this. В этой статье мы рассмотрим область действия и цепочку областей действия более подробно.

Основные понятия области видимости

Scoping : Область видимости — это то, как переменные нашей программы организованы и доступны для движка JavaScript. Scoping задает вопрос: «Где живут переменные?» или «Где мы можем получить доступ к определенной переменной, а где нет?».

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

Scope : Пространство или среда, в которой объявлена ​​определенная переменная (среда переменных в случае функций, которая хранится в контексте выполнения функций). В JavaScript у нас есть глобальная область действия, область действия функции и область действия блока.

Scope of a variable : Область нашего кода, где можно получить доступ к определенной переменной.

3 типа области видимости в JavaScript

1. Глобальный охват

const me = 'Joon'
const position = 'Frontend'
const year = 1991
  • Вне любой функции или блока.
  • Переменные, объявленные в глобальной области видимости, доступны везде.
  • Мы называем переменные, объявленные в глобальной области видимости, глобальными переменными.

2. Объем функций

function calcAge(birthYear) {
  const now = 2021;
  const age = now - birthYear;
  return age;
}
console.log(now); // ReferenceError
  • Области, определяемые функциями.
  • Переменные доступны только внутри функции. Не снаружи.
  • Также называется локальной областью действия.

3. Область блока (ES6)

if (year >= 1981 && year <= 1996) {
  const millenial = true;
  const food = 'Avocado Toast';
}
console.log(millenial); // ReferenceError
  • Области, определяемые блоками.
  • Начиная с ES6 не только функции создают области видимости, но и блоки.
  • Переменные доступны только внутри блока (в пределах блока).
  • Однако это относится только к переменным let и const. Переменные, объявленные с помощью var, попадают в ближайшую область действия функции.
  • Функции также ограничены блоками (только в строгом режиме).

Цепочка масштабов

У нас есть вложенная структура областей видимости, в которой одна область видимости находится внутри другой. Каждая область всегда имеет доступ ко всем переменным из всех своих внешних областей, то есть из всех своих родительских областей. Это называется scope chain.

Если одной области необходимо использовать определенную переменную, но она не может найти ее в текущей области, она просматривает цепочку областей и проверяет, может ли она найти переменную в одной из родительских областей. Этот процесс называется variable lookup.

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

Мы уже упоминали, что начиная с ES6 не только функции создают области видимости, но и блоки. Здесь у нас есть область действия блока операторов if, которая имеет две переменные, одну с ключевым словом const, а другую с ключевым словом var. Область действия блока применяется только к переменным let и const, поэтому, если область действия блока включает только переменную decade, а не millenial. (переменная millenial включена в первую область действия функции.)

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

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

Цепочка областей видимости и стек вызовов

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

Начиная с вызова первой функции, он вызывает вторую функцию, которая, в свою очередь, вызывает третью функцию. Внутри стека вызовов создается один контекст выполнения для каждой функции в точном порядке, в котором функции вызывались. Каждый контекст выполнения имеет переменную среду (VE). Теперь давайте начнем строить цепочку областей видимости, начиная с верхней, глобальной области видимости.

Переменные, доступные в глобальной области видимости, — это в точности те, которые хранятся в среде переменных глобального контекста выполнения.

Первая область получает доступ ко всем переменным из своей родительской области (глобальной области) благодаря цепочке областей. Цепочка областей видимости — это порядок, в котором функции написаны в коде. Имейте в виду, что цепочка областей действия не имеет ничего общего с порядком контекстов выполнения в стеке вызовов. Цепочка областей действия получает переменные среды из контекста выполнения в стеке вызовов, но не более того. . Порядок вызовов функций вообще не имеет отношения к цепочке областей видимости.

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

При вызове третьей функции во второй функции нет возможности получить доступ к переменной C, которая определена во второй функции, что приводит к ошибке ссылки. Даже несмотря на то, что третья функция была вызвана внутри второй функции! Опять же, помните, что порядок вызовов функций вообще не влияет на цепочку областей видимости.

Ссылка