Меню ×
Область видимости в JavaScript

Область видимости в JavaScript

В этой статье мы поговорим о таких понятиях, как область видимости переменных в JavaScript, локальная и глобальная область видимости, подъем переменных, и их особенностях. Эти вещи могут показаться простыми, или даже элементарными, но это не так. Есть несколько важных тонкостей, которые необходимо понимать.

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

Переменные могут иметь локальную или глобальную область видимости.

Локальная область видимости (уровня функции)

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

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

Пример области видимости уровня функции:

	
var name = "John";

function showName() {
var name = "Jack"; // локальная переменная, доступна только внутри функции
    console.log(name); // Jack
}
console.log(name); // глобальная переменная
	

Пример области видимости уровня блока:

	
var name = "John";
// блок if не создает локальной области видимости
if (name) { 
    name = "Jack"; // глобальная переменная
    console.log(name);
}
console.log(name); // Jack
	

Всегда объявляйте локальные переменные

Всегда объявляйте локальные переменные перед их использованием. На самом деле, если вы используете JSHint, он должен сообщить вам о синтаксической ошибке, если переменная не была объявлена. Проблема необъявленных переменных показана примере ниже:

	
/* если вы не объявляете локальную переменную с помощью ключевого слова var, она получает глобальную область видимости */
var name = "Michael Jackson";

function showCelebrityName() {
    console.log(name);
}

function showOrdinaryPersonName() {
    name = "Johnny Evers";
    console.log(name);
}
showCelebrityName(); // Michael Jackson

// переменная name не была объявлена в функции, поэтому она изменяет глобальную
showOrdinaryPersonName(); // Johnny Evers
showCelebrityName(); // Johnny Evers

/* Решением данной проблемы будет объявление локальной переменной с помощью ключевого слова var */
function showOrdinaryPersonName() {
    var name = "Johnny Evers";
    console.log(name);
}
	

Локальные переменные имеют больший приоритет, чем глобальные

Если объявить глобальную и локальную переменные с одинаковым именем, локальная переменная будет иметь больший приоритет, когда вы попытаетесь использовать переменную внутри функции:

	
var name = "Paul";
function users() {
    var name = "Jack";
    console.log(name);
}
users(); // Jack
	

Глобальная область видимости

Все переменные, объявленные вне функций, попадают в глобальную область видимости.

	
// примеры объявления глобальных переменных:
var myName = "Richard";

// или
firstName = "Richard";

// или
var name; 

/* доступ к глобальной переменной можно получить также через объект window */
console.log(window.myName); // Richard;
console.log("myName" in window); // true
console.log("firstName" in window); // true
	

Переменная, инициализированная без ключевого слова var, также имеет в глобальную область видимости:

	
function showAge() {
    age = 90;
    console.log(age);
}
showAge();
console.log(age); // 90
	

Подъем переменных

Если переменная определена внутри функции, она поднимается к верхней части функции, если глобально — к верхней части глобального контекста. При этом поднимается только объявление функции без инициализации. Рассмотрим, что это значит на примере:

	
var name = "Ford";

function showName() {
    console.log("First Name: " + name);
    var name = "Ford";
    console.log("Last Name: " + name);
}
showName(); 

// First Name: undefined
// Last Name: Ford

/* Объявление переменной name поднимается вверх без присваивания, перекрывая глобальную переменную, поэтому в первом случае значение переменной name - undefined */
	

Похожие материалы

Допустим нужно выделить текущий пункт меню отдельным стилем. Иногда, это сделать просто невозможно (в случае Ajax) или сложно из-за структуры меню и тут нам на помощь приходит JavaScript, а точнее jQuery

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

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Заявка на создание сайта / Продвижение сайта

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

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

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта
Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту

Закажите сайт по телефону: +7 (929) 701 21 71

наверх