В вашем доме у вас могут быть предметы на кухне или в коридоре, которые доступны для всех, кто там живет. В вашей комнате у вас может быть еще несколько личных вещей, которые вы предпочитаете использовать только для себя. Этот пример показывает, как область видимости работает в JavaScript. Это определение правил доступа к переменным, объектам и функциям при выполнении кода.
Область действия в JavaScript определяет текущий контекст кода. На базовом уровне в JavaScript есть две области видимости: глобальная и локальная, и, по сути, они определяют, какие переменные доступны и видны во время выполнения кода.
Что такое глобальный масштаб?
В JavaScript наши программы имеют одну глобальную область видимости. Переменные, которые находятся внутри глобальной области видимости, доступны, изменяемы и видимы из любого места в нашем коде. Переменные в глобальной области также доступны на протяжении всего времени существования нашей программы. Переменные, объявленные вне функции или блока, являются частью глобальной области видимости.
Когда мы объявляем переменные в глобальной области видимости, важно помнить, почему мы это делаем. Объявление переменных в глобальной области видимости может занимать память при запуске программы, а инциденты с именами могут возникать, когда переменные с одним и тем же именем объявляются отдельно в разных областях нашего кода. Ниже приведен пример переменной, объявленной в глобальной области видимости.
var ourGlobalVariable = "Hello";
function someFunction() {
return ourGlobalVariable;
}
someFunction();
//Returns ---> 'Hello'
В приведенном выше примере мы объявляем глобальную переменную ourGlobalVariable и инициализируем ее строкой hello. Затем мы определяем функцию с именем someFunction, которая будет возвращать ourGlobalVariable при вызове. Наконец, мы продолжаем и вызываем функцию someFunction, которая возвращает строку из ourGlobalVariable. Все это возможно только потому, что ourGlobalVariable находится в глобальной области видимости и доступна из любого места.
Что такое локальная область?
Всякий раз, когда новая область создается внутри глобальной области, например, каждый раз, когда вы создаете функцию, создается новая локальная область. Любые переменные, созданные внутри этой локальной области видимости, будут доступны только внутри этой функции. Параметры функции также классифицируются как находящиеся в локальной области видимости. Если вы попытаетесь получить к ним доступ из-за пределов функции, JavaScript выдаст ошибку.
Начиная с ES6 мы можем разделить локальную область на две части: область действия и область действия блока. Когда мы используем переменные в наши дни, мы обычно используем let или const. Учитывая объем кода, написанного до ES6, все же стоит познакомиться с var. Каждая из этих переменных использует разные области видимости, как показано ниже:
- var: область действия функции
- const: область действия блока
- let: блокировать область действия
Что такое область действия функции?
Когда переменная определена внутри функции, мы можем сказать, что переменная находится в области действия функции. Если вы попытаетесь получить доступ к локальной переменной из-за пределов функции, она была определена как ошибка, в частности, при запуске кода будет выдана ошибка ссылки. Переменные, определенные с помощью ключевых слов let и const, будут вести себя так же в области действия функции, как и в области действия блока.
function someFunction() {
let ourLocalVariable = "Hello";
return ourLocalVariable;
}
console.log(ourLocalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined
В приведенном выше примере мы определяем функцию с именем someFunction. Внутри некоторой функции мы сначала объявляем переменную с именем ourLocalVariable, которая инициализируется строкой Hello. Затем функция возвращает переменную. Вне функции, то есть в глобальной области видимости, мы пытаемся вывести в console.log значение ourLocalVariable. Нам возвращается ошибка ссылки, потому что мы пытаемся получить доступ к локальной переменной из глобальной области.
function someFunction() {
const ourGlobalVariable = "Hello";
return ourGlobalVariable;
}
console.log(ourGlobalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined
В следующем примере мы повторяем те же шаги, используя переменную, созданную с помощью const. Поскольку const и let имеют блочную область видимости, мы столкнулись с одной и той же проблемой.
Что такое область действия блока?
В JavaScript блок — это фрагмент кода, заключенный в пару фигурных скобок. Условные операторы и циклы являются примерами блока.
Область блока означает, что каждый раз, когда создается блок, создается новая локальная область. Когда мы создаем переменную внутри блока, эта переменная затем ограничивается этим блоком. Это означает, что переменные недоступны снаружи блока. Если вы попытаетесь получить доступ к переменной, которая определена внутри блока, извне блока, JavaScript выдаст ошибку (ошибку ссылки). Область блока не применяется, когда мы определяем переменные с ключевым словом var.
function ourScopeExample(){
if (true){
var one = "I was created using var";
}
console.log(one);
}
ourScopeExample();
//Returns ---> I was created using varВ приведенном выше примере мы создаем функцию с именем ourScopeExample. Внутри функции мы создаем блок с помощью оператора if. Затем внутри оператора if мы создаем переменную с именем one, которая инициализируется строкой. За пределами блока мы пытаемся записать в console.log значение one переменной. Наконец, мы вызываем функцию ourScopeExample . Когда этот код запускается, строка, которой был инициализирован one, выводится на консоль. Причина, по которой это работает, заключается в том, что переменная var ограничена функцией, поэтому правила области видимости блока не применяются.
function ourScopeExample(){
if(true){
let two = "I was created using let";
}
console.log(two);
}
ourScopeExample();
//Returns ---> Uncaught ReferenceError: two is not definedТеперь мы повторяем те же шаги, но на этот раз мы используем let вместо var. Когда код запускается на этот раз, возвращается ошибка ссылки, потому что let имеет область действия блока и не может быть доступен из-за пределов блока, в котором он был создан. Если бы мы хотели запустить этот код, нам нужно было бы сделать что-то вроде следующего примера.
function ourScopeExample(){ if(true){ let two = "I was created using let"; console.log(two); } } ourScopeExample();//Returns --->I was created using let
В качестве альтернативы мы могли бы вывести let за пределы блока и во внешнюю область действия функции. Это подводит нас к лексическому объему.
function ourScopeExample(){ let two = "I was created using let"; if(true){ console.log(two); } } ourScopeExample();//Returns --->I was created using let
Лексическая область
Лексическая область — это способ, с помощью которого область функции может получить доступ к переменным из внешней или родительской области. Внутренняя или дочерняя функция лексически связана с внешней/родительской функцией. Это означает, что функция может получить доступ ко всем областям от своей собственной до глобальной области включительно.
function outerParent(){ var one = "I was created using var"; let two = "I was created using let";function innerChild(){ console.log(one); console.log(two); } innerChild(); } outerParent();//Returns ---> //I was created using var //I was created using let
Приведенный выше пример дает еще один пример лексической области видимости. Мы создаем функцию с именем outerParent, внутри которой мы создаем две переменные: одну, созданную с помощью var, и две, созданную с помощью let. Обе эти переменные инициализируются строками. Затем мы создаем еще одну функцию и называем ее innerChild. Внутри функции innerChild мы записываем в консоль значение переменных one и two. Непосредственно вне функции innerChild мы вызываем функцию innerChild. Наконец, вне функции outerParent мы вызываем функцию outerParent. Когда этот код запускается на обоих console.logs, они работают успешно.
Надеюсь, вам понравилась эта статья. Не стесняйтесь оставлять комментарии, вопросы или отзывы и подписывайтесь на меня, чтобы получать больше контента!
