Глобальный объект Window — JS: DOM API

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

Через него происходит управление окнами (вкладками) в браузере. Он содержит функции для открытия вкладки, управления положением страницы и многим другим:

// Открывает новую вкладку
window.open();

Объект window доступен в консоли DevTools. Попробуем вызвать метод из примера выше там.

Вот несколько примеров его возможностей:

// Возвращает объект, содержащий информацию об экране
window.screen;
// Screen {availWidth: 1280, availHeight: 775, width: 1280, height: 800, …}

// Перемещает страницу до точки (x-coord, y-coord)
window.scrollTo(0, 1000);

// Видимые высота и ширина страницы
// Меняются при изменении размеров окна
window.innerHeight;
window.innerWidth;

Кроме того, внутри window находится объект document. Мы сможем использовать его при работе с содержимым страницы в последующих уроках.

Объект window задает глобальный контекст выполнения. Тег window хранит все остальные глобально доступные свойства и объекты внутри себя. Когда мы вызываем глобальные функции, такие как alert() или console.log(), браузер ищет их в объекте window. Другими словами, мы фактически вызываем window.alert().

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

console.log('hey');
// window.console.log('hey');

Math.abs(5);
// window.Math.abs(5);

// Можно даже так
close();
// вместо window.close()

Опасность глобального состояния

Наличие объекта window — это техническая реализация от JavaScript, на которую не стоит полагаться при разработке.

Рассмотрим такой код:

window.globalProperty = 'Global variables are evil';

Установка свойства в window автоматически делает это свойство доступным из любой точки кода браузера. Другими словами, мы создали глобальную переменную.

Такие переменные создают много проблем при разработке. Нам не совсем понятно, откуда они берутся и кто их изменяет.

На глобальные переменные нельзя полагаться. Есть вероятность, что в них появятся изменения, что часто приводит к ошибкам в работе.

Кроме того, на веб-страницах можно встретить различные скрипты, не связанные друг с другом. Это могут быть различные счетчики аналитических систем, маркетинговые инструменты и другие подобные вещи. Все они имеют доступ к одному и тому же window.

Из-за этого мы можем оказаться в такой ситуации: мы устанавливаем свойства в window в одном скрипте и случайно нарушаем работу другого скрипта, который использует то же самое глобальное свойство.

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

Самостоятельная работа

1. Откройте консоль в своем браузере
2. Изучите объект window

3. Попробуйте выполнить открытие новой вкладки:

   window.open();
   

Дополнительные материалы

1. Window

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты