Доступен ли Global в браузере

Global объект в браузере

Что такое Global

В браузере глобальный объект называется window. Это объект, который содержит:

• Все глобальные переменные
• Встроенные функции (alert, setTimeout и т.д.)
• DOM API (document, fetch, localStorage и т.д.)
• Объекты браузера (navigator, location, history и т.д.)

Важно: Слово "Global" как таковое в браузере не используется - это Node.js термин. В браузере это window.

Доступ к window

// window доступен везде в браузере

// Явный доступ
window.alert('Hello');
window.location.href = 'https://example.com';
console.log(window.document.title);

// Неявный доступ (обычно используется)
alert('Hello'); // Это же самое, что window.alert('Hello')
location.href = 'https://example.com'; // window.location.href
document.getElementById('id'); // window.document.getElementById('id')

Структура window объекта

// 1. Глобальные переменные и функции
window.myVar = 'value';
window.myFunction = () => {};

// 2. Встроенные объекты
window.Object, window.Array, window.String, window.Number

// 3. Браузерные API
window.fetch()          // HTTP запросы
window.localStorage     // Локальное хранилище
window.sessionStorage   // Хранилище сессии
window.setTimeout()     // Отложенное выполнение
window.setInterval()    // Повторяющееся выполнение
window.requestAnimationFrame() // Анимации

// 4. DOM
window.document         // DOM дерево
window.HTMLElement      // Класс элементов
window.DocumentFragment // Фрагменты

// 5. События
window.addEventListener('load', () => {});
window.addEventListener('resize', () => {});
window.addEventListener('scroll', () => {});

// 6. История, навигация
window.location         // URL и навигация
window.history          // История браузера
window.navigator        // Информация о браузере

// 7. Окна и фреймы
window.parent           // Родительское окно (для iframe)
window.top              // Верхнее окно
window.frames           // Фреймы на странице

Примеры использования window

1. Навигация

// Перейти на новую страницу
window.location.href = 'https://example.com';

// Перезагрузить страницу
window.location.reload();

// Вернуться на предыдущую страницу
window.history.back();

// Получить текущий URL
const currentUrl = window.location.href;
const hostname = window.location.hostname;
const pathname = window.location.pathname;

2. Работа с хранилищем

// localStorage
window.localStorage.setItem('user', JSON.stringify({ name: 'John' }));
const user = JSON.parse(window.localStorage.getItem('user'));

// sessionStorage
window.sessionStorage.setItem('token', 'abc123');
const token = window.sessionStorage.getItem('token');

3. Асинхронные операции

// Отложить выполнение на 1 секунду
window.setTimeout(() => {
  console.log('Executed after 1 second');
}, 1000);

// Повторять каждые 2 секунды
const intervalId = window.setInterval(() => {
  console.log('Executed every 2 seconds');
}, 2000);

// Отменить повтор
window.clearInterval(intervalId);

// Анимация
window.requestAnimationFrame(() => {
  // Выполнится перед следующей перерисовкой
  element.style.opacity = 0.5;
});

4. Размер и позиция окна

// Размер окна браузера
window.innerWidth;   // Ширина окна
window.innerHeight;  // Высота окна

// Размер экрана
window.screenWidth;  // Ширина экрана монитора
window.screenHeight; // Высота экрана монитора

// Позиция прокрутки
window.scrollX;      // Горизонтальная прокрутка
window.scrollY;      // Вертикальная прокрутка

// События изменения размера
window.addEventListener('resize', () => {
  console.log(`Window resized: ${window.innerWidth}x${window.innerHeight}`);
});

5. Информация о браузере

// navigator содержит информацию о браузере
window.navigator.userAgent;    // Строка браузера
window.navigator.language;     // Язык браузера
window.navigator.onLine;       // Есть ли интернет
window.navigator.geolocation;  // Геолокация
window.navigator.mediaDevices; // Камера, микрофон

// Проверить онлайн статус
if (window.navigator.onLine) {
  console.log('Online');
} else {
  console.log('Offline');
}

window vs global в Node.js

ВАЖНО: В Node.js глобальный объект называется global, а не window.

// В браузере
window.myVar = 'value';
console.log(window); // Window {...}

// В Node.js
global.myVar = 'value';
console.log(global); // Object {...}

// В современном JavaScript есть globalThis
globalThis.myVar = 'value'; // Работает везде: браузер и Node.js

Глобальные переменные и функции

// Когда вы создаете переменную на глобальном уровне,
// она автоматически добавляется в window

var globalVar = 'value';
console.log(window.globalVar); // 'value'

function globalFunc() {}
console.log(window.globalFunc); // function globalFunc() {}

// НО let и const этого не делают (они блок-скопированы)
let blockVar = 'value';
console.log(window.blockVar); // undefined

Проблемы и лучшие практики

1. Загрязнение глобального скопа

// ПЛОХО - создаем глобальные переменные
var userInfo = { name: 'John' }; // Попадает в window

function processData() {
  userData = []; // Случайно создана глобальная переменная
}

// ХОРОШО - используем локальный скоп
(function() {
  const userInfo = { name: 'John' };
  
  function processData() {
    const userData = [];
  }
})();

// ИЛИ модули
// module.js
const userInfo = { name: 'John' };
export { userInfo };

// main.js
import { userInfo } from './module.js';

2. Проверка доступности функций

// Некоторые API могут быть недоступны в старых браузерах

// ПЛОХО - предположение, что fetch доступен
fetch('/api/data');

// ХОРОШО - проверка перед использованием
if (window.fetch) {
  fetch('/api/data');
} else {
  // Fallback для старых браузеров
  console.log('fetch not supported');
}

3. Работа с iframe

// Если страница находится в iframe, можно получить доступ к родителю

// Текущее окно
window; // Окно iframe

// Родительское окно
window.parent; // Окно, которое содержит iframe

// Верхнее окно (если множество уровней iframe)
window.top; // Самое верхнее окно

// Отправить сообщение в родительское окно
window.parent.postMessage({ action: 'click' }, '*');

4. Перенаправления и перезагрузки

// Разные способы навигации

// Перейти на новый URL и добавить в историю
window.location.href = 'https://example.com';

// Перейти на новый URL, заменяя текущий в истории
window.location.replace('https://example.com');

// Перезагрузить страницу
window.location.reload();

// Перезагрузить без кэша
window.location.reload(true);

Заключение

window доступен везде в браузере:

• Это главный глобальный объект
• Содержит все API браузера (fetch, localStorage, document и т.д.)
• Глобальные переменные и функции (созданные var) добавляются в window
• Обычно используется неявно (alert вместо window.alert)
• В Node.js используется global вместо window
• В современном коде используй globalThis для совместимости

Лучшие практики:

• Не загрязняй глобальный скоп (используй const, let, модули)
• Проверяй доступность API перед использованием
• Избегай полагаться на window, где это возможно
• В SSR (Next.js) проверяй typeof window !== 'undefined' перед использованием