Love Frontend
Сообщество
фронтенд разработчиков
EN

JavaScript var window global object

Дата публикации: 04.08.2018

Многие начинающие JavaScript разработчики задаются вопросом, что такое window, почему я иногда могу обращаться к своей переменной myVar через window.myVar, а иногда без window. Почему я могу повесить setInterval так: window.setInterval() и без window: setInterval(). Что же за волшебный объект window?

В большинстве случаев, на ваш вопрос можно ответить коротко: когда вы декларируете переменную через var не внутри функции, то она присваевается глобальному объекту, которым в браузере как раз и является объект window. В Node.js глобальным объектом является — global.

// Переменная доступна как go или window.go,
// потому что она находится в глобальной
// области видимости var go = 'good'
// В данном случае вы сможете обратиться
// к переменной только внутри самой функции
// потому что go находится внутри области
// видимости функции. window.go не сработает
function () {
var go = 'inner'
}

Это происходит из-за механизма работы области видимости функций в JS.

window var и let в ES6

Однако, это ещё не всё. Следует так же помнить о ключевом слове let, доступном начиная с ES6. let позволяет декларировать переменную на уровне блоков { }, а не только функций. То есть переменная объявленная в цикле или в условном блоке через let не попадёт в глобальную область видимости, как это было бы в ES5.

// Переменная go не доступна вне блока
// и следовательно не доступна как window.go
// Но если мы заменим слово let на var, то
// она уже станет глобальной
if (condition) {
let go = 'Сработало'
}

Чтобы полностью понять вышесказанное, советую в браузерной консоли разработчика сначала присвоить переменной с любым именем какой-либо текс через var внутри фигурных скобок, а затем сделать то же самое через let и вызовите обе переменные по очереди через ту же консоль.

Не стоит забывать один важный нюанс, что вы можете забыть ключевое слово для декларирования переменной var и тем самым присвоить вашу переменную глобальному объекту.

// Если вы забудете указать слово let или var,
// то переменная автоматически станет глобальной.
go = 'плохо'

Хорошей практикой является использование в ваших проектах линтеров для предотвращения таких ошибок. Подробнее о eslint. Обзор самых популярных наборов правил для линтования JavaScript.

Оставьте свой e-mail чтобы получать уведомления о свежих статьях.