Поехали!
Глобальная область видимости
Мы начнем с изучения самой обширной области, которая известна как глобальная область видимости. В реальной жизни, когда мы говорим, что что-то может быть услышано глобально, то имеем в виду, что услышим это «что-либо», находясь в любой точке мира.
В JavaScript все работает аналогично. Например, если мы говорим, что переменная доступна глобально, то имеем в виду, что у любого кода на нашей странице есть доступ для ее считывания или изменения. Если мы хотим что-либо определить глобально, то делаем это в коде, находящемся исключительно за пределами какой-либо функции.
Рассмотрим пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Variable Scope</title>
</head>
<body>
<script>
let counter = 0;
alert(counter);
</script>
</body>
</html>
Здесь мы просто объявляем переменную counter и инициализируем ее как 0. Поскольку эта переменная объявлена напрямую в теге script и не помещена в функцию, она считается глобальной. Это означает, что к этой переменной counter может обратиться любой код, находящийся в документе.
В следующем примере выделен этот аспект:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Variable Scope</title>
</head>
<body>
<script>
let counter = 0;
function returnCount() {
return counter;
}
alert(returnCount());
</script>
</body>
</html>
Мы видим, что переменная counter объявлена вне функции returnCount. Но, несмотря на это, у функции есть полный доступ к ней. При выполнении кода функция alert вызывает функцию returnCount, которая возвращает значение переменной counter.
Все это время мы использовали глобальные переменные, не придавая этому значения. В данной ситуации я всего лишь официально представил вам гостя, который тусуется на вашей вечеринке уже какое-то время.
Локальная область видимости
Становится еще интереснее, когда мы смотрим на элементы, не объявленные глобально. С этого момента понимание, что такое области видимости, начинает приносить свои плоды. Как мы видели ранее, к переменной, объявленной глобально, внутри функции также есть доступ:
let counter = 0;
function returnCount() {
return counter;
}
Но не наоборот. Переменная, объявленная внутри функции, не будет доступна извне:
function setState() {
let state = "on";
}
setState();
alert(state) // undefined
В этом примере переменная state объявлена внутри функции setState и обращение к ней извне не работает. Причина в том, что область видимости переменной state является локальной относительно самой функции setState. В более общей форме это можно описать, сказав, что переменная stateлокальна.
Использование переменных без объявления
Если мы инициализируем переменную state, не объявляя ее формально, область ее видимости будет определяться совсем иначе:
function setState() {
state = "on";
}
setState(); alert(state) // "on"
Хотя в этом случае переменная state и появляется внутри функции setState, сам факт того, что мы объявили ее без let, const (или var — устаревший способ объявления переменных), делает ее глобальной. По большому счету, вам не понадобится объявлять переменные подобным образом. Поэтому всегда используйте let или const.
Особенности областей видимости
Поскольку сейчас мы разбираем JavaScript, было бы слишком просто останавливаться на достигнутом понимании областей видимости. В последующих разделах я обозначу некоторые важные особенности.
Области блоков
Наш код состоит из блоков. Множества блоков! И вообще, что такое блок? Блок — это набор инструкций JavaScript, почти всегда заключенный в фигурные скобки. Например, посмотрим на следующий код:
let safeToProceed = false;
function isItSafe() {
if (safeToProceed) {
alert("You shall pass!");
} else {
alert("You shall not pass!");
}
}
isItSafe();
Если посчитать количество пар фигурных скобок, станет ясно, что здесь три блока. Один из них — это область, содержащаяся в самой функции isItSafe: