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 = ... // наша реалізація сучасних можливостей мови
}
Порада: | Створення багатьох глобальних змінних може призвести до конфліктів у назвах, а також ускладнити відлагодження коду. Якщо можливо, намагайтеся обмежити їх кількість або використовуйте простори імен для організації глобальних значень. |
Нотатка: | У JavaScript "глобальний" зазвичай означає "не в межах функції". Якщо змінна оголошена поза будь-якою функцією, вона є глобальною, і її можна використовувати в усьому коді. |
Нотатка: | Замість того, щоб користуватися |
Синтаксис
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 |
Приклади
У даному прикладі ми працюємо з глобальним об'єктом JavaScript в середовищі браузера, який називається window
. На початку ми створюємо глобальну змінну currentUser
з ім'ям користувача "John". Після цього ми використовуємо функцію alert
для відображення імені користувача. Наостанок, ми демонструємо, як безпечно звертатися до глобальної змінної, якщо в області видимості існує локальна змінна з таким же ім'ям, використовуючи window.currentUser.name
.
// зробити інформацію про поточного користувача глобальною, для надання доступу всім скриптам
window.currentUser = {
name: "John"
};
alert(currentUser.name); // John
// або, якщо у нас є локальна змінна з ім'ям "currentUser",
// отримаємо її з window явно
alert(window.currentUser.name); // John
У цьому прикладі ми створили глобальний об'єкт userConfig
, який зберігає інформацію про користувача та його персональні налаштування. Об'єкт має дві підсекції: userInfo
для особистої інформації користувача та preferences
для його налаштувань.
Ми також створили дві функції:
setTheme
- дозволяє змінювати тему відображення користувача (з темної на світлу та навпаки).displayUserInfo
- виводить інформацію про користувача в консоль.
Цей приклад демонструє, як можна структурувати глобальні дані та використовувати їх в різних частинах програми.
// Створюємо глобальний об'єкт для зберігання інформації про користувача та його налаштування
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()
- Перетворює рядок у ціле число.
Number()
- Вбудований об'єкт, що представляє числовий конструктор і допоміжні методи для роботи з числами.
encodeURI()
- Перетворює текст в кодований вигляд, придатний для використання в Уніфікованих Ідентифікаторах Ресурсу (URI).
parseFloat()
- Перетворює рядок у десяткове число.
decodeURIComponent()
- Перетворює закодовані компоненти URI назад у їхній первісний текстовий формат.
eval()
- Виконує рядок як код JavaScript.
encodeURIComponent()
- Закодовує компонент URI, замінюючи спеціальні символи на їхні коди відсотка.
decodeURI()
- Перетворює закодований URI назад в звичайний рядок.