Що таке window?

JavaScriptJunior~1 хв читання

об'єкт window - це глобальний об'єкт браузера, який представляє вікно вкладки, у якому виконується JavaScript.

Він є кореневим об'єктом для всього браузерного середовища, і через нього доступні всі глобальні змінні, функції та сам document.

1. Що таке `window`

window - це об'єкт, який описує поточне вікно браузера і містить:

саму веб-сторінку (document),
методи керування вікном (відкриття, закриття, прокручування тощо),
таймери (setTimeout, setInterval),
API браузера (localStorage, history, location та ін.),
усі глобальні змінні (наприклад, оголошені через var).

2. Приклад:

javascript

console.log(window.document); // доступ до DOM
console.log(window.location.href); // URL сторінки
console.log(window.innerWidth); // ширина вікна браузера

Насправді у браузері майже все "живе" всередині window.

3. `window` - це глобальний об'єкт

Коли ти пишеш:

javascript

alert("Привіт");

це те саме, що:

javascript

window.alert("Привіт");

Майже всі глобальні функції та властивості насправді належать window. Те саме стосується змінних, оголошених через var:

javascript

var x = 10;
console.log(window.x); // 10

Але - змінні через let і const не додаються до window:

javascript

let y = 5;
console.log(window.y); // undefined

4. Основні властивості та об'єкти всередині `window`

Властивість / Об'єкт	Що робить
`window.document`	HTML-документ (DOM-дерево)
`window.location`	Інформація про URL і методи навігації
`window.history`	Історія переходів
`window.navigator`	Інформація про браузер і систему
`window.localStorage`	Постійне сховище даних
`window.sessionStorage`	Тимчасове сховище для сесії
`window.console`	Доступ до консолі (`console.log`)
`window.alert()`, `confirm()`, `prompt()`	Діалогові вікна
`window.setTimeout()` / `setInterval()`	Таймери
`window.innerWidth`, `window.innerHeight`	Розміри області перегляду
`window.scrollTo()`, `window.scrollBy()`	Прокручування сторінки

5. Приклади:

Керування навігацією:

javascript

console.log(window.location.href); // https://example.com
window.location.href = "https://example.org"; // перейти на інший сайт

Таймери:

javascript

window.setTimeout(() => {
  console.log("Минуло 2 секунди");
}, 2000);

Прокручування сторінки:

javascript

window.scrollTo({ top: 0, behavior: "smooth" });

Сховище:

javascript

window.localStorage.setItem("theme", "dark");
console.log(window.localStorage.getItem("theme")); // "dark"

6. Взаємозв'язок:

javascript

window
 ├── document   -> HTML-документ (DOM)
 ├── location   -> URL і навігація
 ├── history    -> історія переходів
 ├── navigator  -> інформація про браузер
 ├── localStorage / sessionStorage -> сховище
 ├── console
 ├── timers (setTimeout, setInterval)
 └── ... і багато чого іншого

7. Ключова відмінність від `document`:

Властивість	`window`	`document`
Що представляє	Вкладку браузера (вікно)	Вміст сторінки (DOM)
Глобальний об'єкт	Так	Ні
Містить	Все середовище (DOM, таймери, API)	Тільки дерево елементів HTML
Приклад	`window.innerWidth`	`document.body`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.