Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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

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

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

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

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

Window

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

// Возвращает объект, содержащий информацию об экране
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

Аватары экспертов Хекслета

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

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

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 25 000 ₸ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 14 ноября
профессия
от 39 525 ₸ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 14 ноября
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
Старт 14 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»