Глобальний об’єкт

Глобальний об’єкт надає нам змінні та функції, які доступні в будь-якому місці програми. Типово це ті, які вбудовані в мову або середовище.

У браузері він має назву window, у Node.js – global, для інших середовищ він може мати іншу назву.

Нещодавно до мови було додано globalThis як стандартизовану назву глобального об’єкта, який має підтримуватися у всіх середовищах. Він підтримується у всіх основних браузерах.

Ми будемо використовувати window, вважаючи, що наше середовище – це браузер. Якщо ваш скрипт може працювати в інших середовищах, краще використовувати замість цього globalThis.

До всіх властивостей глобального об’єкта можна отримати доступ напряму:

alert("Привіт");
// це те ж саме, що і
window.alert("Привіт");

У браузері глобальні функції і змінні оголошені за допомогою var (не let/const!) стають властивостями глобального об’єкта:

var gVar = 5;

alert(window.gVar); // 5 (змінна стала властивістю глобального об’єкта)

Так само стається з оголошеними функціями (function declaration). Тобто з використанням слова function в основному потоці коду, а не як в функціональних виразах.

Будь ласка, не покладайтесь на це! Така поведінка існує з міркувань сумісності. Сучасні скрипти використовують JavaScript модулі, де такого не відбувається

Якщо замість var ми використаємо let, такого не станеться:

let gLet = 5;

alert(window.gLet); // undefined (змінна не стає властивістю глобального об’єкта)

Якщо значення настільки важливе, що ви хочете зробити його глобальним, то напишіть його безпосередньо як властивість:

// робимо інформацію про користувача глобальною, щоб вона була доступною в будь-якому місці коду
window.currentUser = {
  name: "John"
};

// десь у коді
alert(currentUser.name);  // John

// або, якщо ми маємо локальну змінну з ім’ям "currentUser"
// отримаймо її з window безпосередньо (так безпечніше!)
alert(window.currentUser.name); // John

При цьому зазвичай не рекомендується використовувати глобальні змінні. Слід застосовувати їх якомога рідше. Дизайн коду, при якому функція отримує вхідні параметри і видає певний результат, чистіше, надійніше і зручніше для тестування, ніж коли використовуються зовнішні, а тим більш глобальні змінні.

Використання поліфілів

Ми використовуємо глобальний об’єкт для тестування підтримки сучасних мовних функцій браузером.

Наприклад, для перевірки чи існує вбудований об’єкт Promise (його немає у дуже старих браузерах):

if (!window.Promise) {
  alert("Твій браузер застарів!");
}

Якщо його немає (побачимо повідомлення: “Твій браузер застарів!”), то ми можемо створити “поліфіли”, щоб додати підтримку цього об’єкту. Тобто щоб додати функції, які не підтримуються середовищем, але існують у сучасному стандарті.

if (!window.Promise) {
  window.Promise = ... // Не стандартна реалізація `Promise`
}

Підсумки

• Глобальний об’єкт містить змінні, які мають бути доступними скрізь.

  Включаючи вбудовані у JavaScript, такі як Array, та значення, характерні для середовища, такі як window.innerHeight – висота вікна у браузері.

• Глобальний об’єкт має універсальну назву globalThis.

  … Але частіше згадуються специфічні назви середовища “старої школи”, такі як window (браузер) та global (Node.js).

• Ми повинні зберігати значення у глобальному об’єкті, лише якщо вони дійсно глобальні для нашого проєкту. І старатись писати код так, щоб таких значень було якомога менше.

• В браузерах, якщо ми не використовуємо модулі, глобальні функції та змінні, оголошені за допомогою var, стають властивістю глобального об’єкта.

• Для того, щоб код був простішим і в майбутньому його легше було підтримувати, слід звертатися до властивостей глобального об’єкта безпосередньо, через window.x.