С уверенностью в бесчисленных видеороликах на YouTube по этому вопросу я могу с уверенностью сказать, что область действия — одна из самых сложных концепций Javascript, если вы пришли из любого другого языка кодирования. Scope, конечно, существует и в других языках, но в Javascript есть особые обстоятельства, которые создают больше проблем.
Начнем с определения области видимости:
Область – это понятие, в котором элементы (такие как переменные, методы и объекты) доступны.
В Javascript есть три разных типа области действия: глобальная, функциональная и блочная. Определения довольно интуитивны, но мы все равно собираемся вернуться домой.
Глобальный охват:
Если что-то находится в глобальной области видимости, это означает, что оно доступно везде в вашем коде. Функции и переменные, объявленные в этой области, могут ссылаться друг на друга, поскольку они находятся в одной области. Не объявлено в области функции или блока.
Область действия:
Если что-то объявлено в области действия функции или «с областью действия функции», оно доступно для других функций и переменных, объявленных в той же функции. Однако обратное неверно. На вещи внутри функции не могут ссылаться вещи в следующей внешней области видимости.
Область блокировки:
Блок в Javascript — это оператор в фигурных скобках (обычно для условного оператора или цикла for). Здесь все становится немного сложнее. Некоторые переменные имеют блочную область видимости. Переменные, объявленные с помощью const и let, имеют блочную область видимости, что означает, что они доступны только внутри блока, в котором они объявлены. Переменные, объявленные с помощью var, не имеют блочной области, а только функции.
Теперь поговорим немного о переменных. Переменные объявляются и инициализируются/назначаются.
let a = "juniper"
Приведенный выше код фактически объявляется и инициализируется одновременно. let a — это объявление, а a = “juniper” — инициализация или назначение. Переменные могут быть объявлены с помощью var, const или let. Переменные также могут быть объявлены без использования ключевого слова. Эти переменные называются глобальными переменными.
var a = "apple"
Хотя var обычно не используется в ES6 (и многие рекомендуют не использовать его), все же важно понимать, как он работает, поскольку вы, вероятно, встретите его в каком-то более старом коде. Var относится к области действия функции, не заблокировано. Это означает, что если переменная, объявленная с помощью var, объявлена в блоке, она остается доступной для следующей внешней области. Однако, если он объявлен только внутри функции, он недоступен для следующей внешней области.
let b = "banana"
Переменные, объявленные с помощью let, имеют область действия как в блоке, так и в области функции. Если они объявлены внутри блока, они доступны только внутри этого блока. Let переменных также можно переназначать.
const c = "cherry"
Переменные, объявленные с помощью const, также относятся к блоку и функции. Разница между const и let заключается в том, что const НЕ МОЖЕТ быть переназначено, но все еще может быть изменено. Например, если const c = [“cherry’] , c.push(“strawberry”) составит c = [“cherry”, “strawberry”].
d = "durian" ‹ — глобальная переменная
Глобальные переменные объявляются без var, const или let и доступны везде, независимо от того, где вы их объявляете в коде. Это особенно проблематично, потому что глобальные переменные будут пытаться переопределять другие переменные и создавать ошибки. По этой причине обычно рекомендуется избегать глобального объявления переменных.
Используя это изображение для справки, мы видим, что объекты в области C могут получить доступ к вещам в области B и области A, но не могут получить доступ к c в области D, потому что функция создает свою собственную область. Если бы переменная была объявлена в области C, область D не смогла бы получить к ней доступ.
Наконец, чтобы продемонстрировать, как объявления переменных различаются по поведению, см. код ниже:
Надеюсь, это поможет понять масштаб! Ниже вы найдете ссылки на полезные видеоролики.
Удачного кодирования!
Различия между Var, Let и Const
