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

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.