Об'єкт window

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

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

Теорія

TL;DR

window, це об'єкт поточного вікна або вкладки браузера.
Він містить document, тобто DOM-дерево сторінки.
Він містить методи керування вікном: відкриття, закриття, прокручування.
Він містить таймери setTimeout і setInterval.
Він містить браузерні API: localStorage, sessionStorage, history, location, navigator, console.
Глобальні var-змінні стають властивостями window, а let і const, ні.
window, це все оточення вкладки, а document, лише вміст сторінки.

Швидкий приклад

javascript

console.log(window.document);      // access to the DOM
console.log(window.location.href); // the page URL
console.log(window.innerWidth);    // browser viewport width

У браузері майже все «живе» всередині window.

Що таке `window`

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

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

`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

Вони потрапляють до окремого лексичного запису глобальної області, тому доступні за іменем, але не як властивість window.

Основні властивості та об'єкти всередині `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()`	Прокручування сторінки

Практичні приклади

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

javascript

console.log(window.location.href);            // https://example.com
window.location.href = "https://example.org"; // go to another site

Таймери:

javascript

window.setTimeout(() => {
  console.log("2 seconds have passed");
}, 2000);

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

javascript

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

Сховище:

javascript

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

Схематично взаємозв'язки виглядають так:

text

window
 |-- document   -> HTML document (DOM)
 |-- location   -> URL and navigation
 |-- history    -> navigation history
 |-- navigator  -> browser information
 |-- localStorage / sessionStorage -> storage
 |-- console
 |-- timers (setTimeout, setInterval)
 |-- ... and much more

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

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

Типові помилки

Вважати, що window є і в Node.js. Там глобального window немає, його роль виконує global або універсальний globalThis.
Очікувати, що let і const з'являться у window. Вони не стають його властивостями, на відміну від var.
Плутати window і document: document, це лише одна з властивостей window, дерево елементів сторінки.
Створювати глобальну змінну з іменем, яке вже зайняте у window (наприклад name, top, length, status), і потім дивуватися дивній поведінці.
Читати window.innerWidth як ширину екрана. Це ширина області перегляду; ширина екрана, це screen.width.

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

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

Premium

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