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 = ... // наша реалізація сучасних можливостей мови
}

Синтаксис

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

// зробити інформацію про поточного користувача глобальною, для надання доступу всім скриптам
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'); // Змінить тему на світлу

Методи

String()

Створює або перетворює значення в рядок.

unescape()

Перетворює закодовані символи URI назад у їхній вихідний рядковий вигляд.

isFinite()

Визначає, чи є даний числовий аргумент скінченним числом.

escape()

Перетворює спеціальні символи в рядку на їхні закодовані у вигляді URI еквіваленти.

isNaN()

Перевіряє, чи є значення "не числом" (NaN).

parseInt()

Перетворює рядок у ціле число.

eval()

Number()

Вбудований об'єкт, що представляє числовий конструктор і допоміжні методи для роботи з числами.

encodeURI()

Перетворює текст в кодований вигляд, придатний для використання в Уніфікованих Ідентифікаторах Ресурсу (URI).

parseFloat()

Перетворює рядок у десяткове число.

decodeURIComponent()

Перетворює закодовані компоненти URI назад у їхній первісний текстовий формат.

eval()

Виконує рядок як код JavaScript.

encodeURIComponent()

Закодовує компонент URI, замінюючи спеціальні символи на їхні коди відсотка.

decodeURI()

Перетворює закодований URI назад в звичайний рядок.

escape()

Властивості

NaN

Infinity

Спеціальне числове значення, що представляє нескінченність або результат ділення на нуль.

Infinity

NaN

Позначає значення, яке не є числом.

undefined

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