Первоначально я начал писать статью в блоге о подъеме переменных в Javascript, но довольно быстро понял, что сначала мне нужно объяснить область видимости в Javascript. Чтобы полностью понять тему подъема, необходимо понимать масштаб. Итак, вот я и пишу сообщение в блоге о области видимости в Javascript. Давайте начнем!
До ES6 в Javascript было только два типа области видимости:
- Локальный/функциональный объем
- Глобальный масштаб
ES6 представил новый тип области действия для Javascript, который
- Область блока
Прежде чем мы углубимся в различия каждого типа прицела, давайте обсудим, что такое прицел на самом базовом уровне. Область действия по существу определяет, когда и где можно и нельзя обращаться к переменным. Другими словами, «область действия определяет доступность» переменных.
Давайте погрузимся в сложность каждого типа прицела, по одному.
Глобальный масштаб
Переменная, объявленная вне функции, является глобальной переменной и существует в глобальной области видимости. Это означает, что «все сценарии и функции на веб-странице могут получить к ней доступ». Проще говоря, вы можете использовать эту переменную в любом месте вашей программы.
var shape = “circle”;
console.log(shape); // “circle”
function changeShape() {
shape = “triangle”;
}
changeShape();
console.log(shape); // “triangle”
Локальный/функциональный объем
Когда функция определена, ей доступны все переменные в глобальной области видимости. Функция также имеет доступ к переменным, объявленным внутри нее, которые являются локальными/функциональными. Таким образом, переменная, объявленная внутри функции, относится к нам как локальная переменная и существует только в локальной области/области действия функции.
function exampleFunction() {
var color = “red”;
console.log(color); // “red”
}
exampleFunction();
console.log(color); // ReferenceError: color is not defined
Область блока
Область действия блока была введена в ES6 и использует let и const для объявления переменных. Блок конкретно относится ко всему, что находится внутри фигурных скобок {}. Примерами блока могут быть оператор if или функция. Итак, теперь функции — не единственное, что может создавать свою собственную область видимости.
Когда дело доходит до функций, let и const работают аналогично var.
function myFunc() {
let animal = “dog”;
console.log(animal); // “dog”
}
myFunc();
console.log(animal); // ReferenceError: animal is not defined
Где область блока становится запутанной
Область блока сбивает с толку из-за того, что одно и то же имя переменной используется дважды. Когда вы используете var для объявления двух переменных (что не является областью действия блока), первое объявление переопределяется.
var food = “pizza”;
if (true) {
var food = “ramen”;
console.log(food); // “ramen”
}
console.log(food); // “ramen”
При использовании области блока с помощью let первое объявление остается прежним, а второе объявление недоступно за пределами блока.
let food = “pizza”;
if (true) {
let food = “ramen”; // “ramen”
}
console.log(food); // “pizza”
Хотя использование одного и того же имени для двух переменных не рекомендуется, если вы когда-нибудь будете это делать, обязательно используйте let для объявления ваших переменных, иначе вы получите очень запутанный код и результаты.
Я надеюсь, что этот пост в блоге будет полезен для тех из вас, кто плохо знаком с Javascript! Удачного кодирования.
Ресурсы
ES6: var, let и const — битва между областью действия функции и областью действия блока
Понимание подъема в Javascript
Разница между функцией и областью действия блока в Javascript
