В чем разница между globalThis и window?

Разница между globalThis и window

globalThis и window — это два способа доступа к глобальному объекту в JavaScript, которые имеют важные различия в контексте и совместимости.

Определение

window — это глобальный объект в браузере, представляющий окно браузера и содержащий все глобальные переменные, функции и объекты.

globalThis — это стандартный глобальный объект, введенный в ES2020, который работает одинаково во всех средах JavaScript (браузер, Node.js, Web Workers и т.д.).

Основные различия

1. Окружение (Environment)

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

// В браузере
console.log(typeof window); // 'object'
console.log(window === globalThis); // true

// В Node.js
console.log(typeof window); // 'undefined'

globalThis работает везде:

// В браузере
console.log(typeof globalThis); // 'object'

// В Node.js
console.log(typeof globalThis); // 'object'

// В Web Worker
console.log(typeof globalThis); // 'object'

2. Стандартизация

• window — это нестандартный объект, специфичный для браузера
• globalThis — это стандартный объект, определенный в ECMAScript спецификации

3. Совместимость с различными окружениями

В браузере оба указывают на один и тот же объект:

console.log(window === globalThis); // true в браузере

В Node.js:

console.log(typeof window); // 'undefined'
console.log(typeof globalThis); // 'object'

Практические примеры

Универсальный доступ к глобальному объекту

// Плохо - не работает везде
function addGlobalVariable() {
  window.myVar = 'value'; // Ошибка в Node.js
}

// Хорошо - работает везде
function addGlobalVariable() {
  globalThis.myVar = 'value';
}

Проверка наличия глобальной переменной

// Универсальный способ
if (typeof globalThis !== 'undefined' && globalThis.fetch) {
  // fetch доступен
}

// Или через hasOwnProperty
if ('fetch' in globalThis) {
  // fetch доступен
}

Полифилл для globalThis

// До ES2020 требовался полифилл
if (typeof globalThis === 'undefined') {
  (function() {
    const getGlobal = () => {
      if (typeof self !== 'undefined') return self;
      if (typeof window !== 'undefined') return window;
      if (typeof global !== 'undefined') return global;
      throw new Error('Unable to locate global object');
    };
    globalThis = getGlobal();
  })();
}

Когда использовать что

Используй window когда:

• Работаешь только в браузере
• Нужна работа с DOM, alert(), location и другими браузерными API
• Не планируешь переиспользовать код в других окружениях

Используй globalThis когда:

• Пишешь код, который может работать в разных окружениях (браузер, Node.js, Worker)
• Создаешь универсальные библиотеки и пакеты
• Хочешь быть совместимым со стандартом ECMAScript

Практический пример: Универсальная библиотека

// logger.js - работает везде
export function setupLogger() {
  globalThis.logger = {
    log: (msg) => console.log(msg),
    error: (msg) => console.error(msg)
  };
}

// main.js
import { setupLogger } from './logger.js';
setupLogger();
globalThis.logger.log('Ready'); // Работает везде

Вывод

globalThis — это современный, стандартизированный способ доступа к глобальному объекту. Он работает везде и должен использоваться в новом коде для универсальности. window остается полезным в браузере для доступа к специфичным для браузера API, но для общих целей лучше использовать globalThis.