JS об'єкт Global

Глобальный об'єкт

Глобальний об'єкт надає змінні та функції, готові до використання в будь-якій точці програми. Зазвичай, це елементи, вбудовані безпосередньо в мову чи середовище її роботи. В браузерах він носить ім'я window, у Node.js відомий як global. Але в інших середовищах його назва може відрізнятися.

Не так давно мову JavaScript поповнило нове ім'я для глобального об'єкта — globalThis. Ця назва призначена бути універсальною і працювати в будь-якому середовищі. Основні браузери вже її підтримують.

Надалі ми будемо використовувати window, маючи на увазі роботу в браузері. Проте якщо ваш скрипт можливо запускатиме в інших середовищах, віддайте перевагу globalThis.

Отже, щоб отримати доступ до атрибутів глобального об'єкта:

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

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

var gVar = 5;
alert(window.gVar); // виведе 5

Аналогічна ситуація із функціями, створеними за допомогою Function Declaration.

Якщо ж ви використовуєте let:

let gLet = 5;
alert(window.gLet); // виведе undefined

І коли вам потрібно дійсно зробити деяку властивість глобальною, просто додайте її до глобального об'єкта:

// Записуємо інформацію про користувача глобально
window.currentUser = {
  name: "John"
};
alert(currentUser.name); // виведе John

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

правити

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

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

if (!window.Promise) {
  alert("Ваш браузер застарілий!");
}

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

if (!window.Promise) {
  window.Promise = ... // наша реалізація сучасних можливостей мови
}

правити

Порада

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

автор: Bond правити

Нотатка

У JavaScript "глобальний" зазвичай означає "не в межах функції". Якщо змінна оголошена поза будь-якою функцією, вона є глобальною, і її можна використовувати в усьому коді.

автор: Bond правити

Нотатка

Замість того, щоб користуватися window в браузері або global в Node.js, можна використовувати globalThis. Це універсальний спосіб звертання до глобального об'єкта в різних середовищах виконання.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

var x = window.variable; // для браузера
var x = global.require('path'); // Node.js
var x = globalThis.variable; // Node.js (> 6.0.0)

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	4	1	5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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

alert(currentUser.name); // John

// або, якщо у нас є локальна змінна з ім'ям "currentUser",
// отримаємо її з window явно
alert(window.currentUser.name); // John

// Створюємо глобальний об'єкт для зберігання інформації про користувача та його налаштування
window.userConfig = {
  userInfo: {
    name: "Anna",
    age: 25,
    location: "Kyiv"
  },
  preferences: {
    theme: "dark",
    language: "uk"
  }
};

// Функція, що змінює тему відображення для користувача
function setTheme(theme) {
  if (theme === 'dark' || theme === 'light') {
    window.userConfig.preferences.theme = theme;
    // тут можна додати код для зміни стилів сторінки відповідно до обраної теми
    console.log(`Тема змінена на: ${theme}`);
  } else {
    console.log("Невідома тема. Будь ласка, виберіть 'dark' або 'light'.");
  }
}

// Функція для виведення інформації про користувача
function displayUserInfo() {
  console.log(`Ім'я: ${window.userConfig.userInfo.name}`);
  console.log(`Вік: ${window.userConfig.userInfo.age}`);
  console.log(`Місто: ${window.userConfig.userInfo.location}`);
}

// Використання функцій
displayUserInfo(); // Виведе інформацію про користувача
setTheme('light'); // Змінить тему на світлу