← Назад к вопросам

Есть ли что-либо выше window?

1.6 Junior🔥 181 комментариев
#Soft Skills и рабочие процессы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Иерархия выше window

Да, есть несколько уровней в иерархии глобальных объектов JavaScript. Window - это не самая верхняя вершина. Понимание этой иерархии важно для работы с глобальным контекстом, особенно в браузере.

Иерархия объектов

// 1. globalThis - универсальный глобальный объект (ES2020)
console.log(globalThis); // window (в браузере), global (в Node.js)

// 2. window - глобальный объект браузера
console.log(window);
console.log(window === globalThis); // true в браузере

// 3. Глобальная область видимости
var globalVar = 'test';
console.log(globalVar);     // "test"
console.log(window.globalVar); // "test"

// 4. Все переменные добавляются в window
function myFunction() {}
console.log(window.myFunction); // function

globalThis - самый верхний уровень

В ES2020 был введён стандарт globalThis, который является универсальным способом доступа к глобальному объекту:

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

// Старый способ (зависит от окружения)
if (typeof window !== 'undefined') {
  window.myVar = 'value'; // браузер
} else if (typeof global !== 'undefined') {
  global.myVar = 'value'; // Node.js
}

Структура глобального объекта в браузере

// window содержит:

// 1. Свойства для работы с окном
window.innerHeight  // Высота окна
window.innerWidth   // Ширина окна
window.location     // URL и навигация
window.history      // История браузера
window.navigator    // Информация о браузере

// 2. Объекты для API
window.document     // DOM
window.localStorage // Хранилище
window.sessionStorage // Временное хранилище
window.console      // Консоль
window.fetch        // HTTP запросы
window.XMLHttpRequest // Старый способ запросов
window.WebSocket    // WebSocket

// 3. Функции
window.setTimeout
window.setInterval
window.alert
window.prompt

// 4. Объекты стандартной библиотеки
window.Array
window.Object
window.JSON
window.Math
window.Date
window.Promise
window.Map
window.Set

Структура в виде диаграммы

globalThis (стандартный объект ES2020)
    |
    +-- window (в браузере)
    |   |
    |   +-- document (DOM)
    |   +-- location (URL)
    |   +-- history (навигация)
    |   +-- localStorage
    |   +-- sessionStorage
    |   +-- console
    |   +-- fetch
    |   +-- setTimeout
    |   +-- ...
    |
    +-- global (в Node.js)
    |   |
    |   +-- process
    |   +-- Buffer
    |   +-- require
    |   +-- __dirname
    |   +-- ...

Различие между браузером и Node.js

// БРАУЗЕР
console.log(globalThis === window); // true
console.log(typeof global); // undefined

// NODE.JS
console.log(globalThis === global); // true
console.log(typeof window); // undefined

Область видимости переменных

// 1. var - попадает в глобальный объект
var globalVar = 'test';
console.log(window.globalVar); // "test"

// 2. let/const - НЕ попадают в глобальный объект (script scope)
let localVar = 'test';
console.log(window.localVar); // undefined

// 3. function - попадает в глобальный объект
function myFunc() {}
console.log(window.myFunc); // function

// 4. class - попадает в глобальный объект
class MyClass {}
console.log(window.MyClass); // class

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

Пример 1: Проверка глобального объекта

// Проверить, в каком окружении код работает
function getEnvironment() {
  if (typeof window !== 'undefined') {
    return 'browser';
  } else if (typeof global !== 'undefined') {
    return 'node.js';
  } else {
    return 'unknown';
  }
}

console.log(getEnvironment()); // "browser" или "node.js"

Пример 2: Кросс-платформенный код

// Правильный способ - использовать globalThis
type GlobalContext = typeof globalThis;

const global: GlobalContext = globalThis;

global.myVariable = 'test';
console.log(global.myVariable); // "test"

Пример 3: Полифилл для старых браузеров

// Если нет globalThis (IE 11 и ранее), создаём его
if (typeof globalThis === 'undefined') {
  (function() {
    const globals = {
      window: this,
      global: this,
      self: this,
      globalThis: this
    };
    
    for (const name of Object.keys(globals)) {
      Object.defineProperty(globals, 'globalThis', {
        value: globals,
        writable: false,
        enumerable: false,
        configurable: true
      });
    }
  }).call(this);
}

Иерархия контекстов в браузере

// Window context (самый верхний в браузере)
window // глобальный объект

// Self
self // указывает на window
console.log(self === window); // true

// В Web Workers self не равен window
// (web worker имеет свой контекст)

Области видимости в JavaScript

// Global scope
var x = 1; // попадает в window

// Function scope
function test() {
  var y = 2; // локальная переменная
  console.log(x); // 1 (доступна из global)
}

// Block scope (let/const)
if (true) {
  let z = 3; // только в блоке
  const w = 4; // только в блоке
}

console.log(x); // 1
console.log(typeof y); // undefined
console.log(typeof z); // undefined

Безопасность и лучшие практики

// ПЛОХО - загрязняет глобальный объект
function badFunction() {
  globalVar = 'test'; // создаёт window.globalVar
  this.anotherVar = 'value'; // может быть window.anotherVar
}

// ХОРОШО - используй local scope
function goodFunction() {
  const localVar = 'test'; // локальная переменная
  let anotherVar = 'value';
  return localVar;
}

// ХОРОШО - явно добавляй в global если нужно
if (typeof window !== 'undefined') {
  window.publicAPI = {
    doSomething: () => { /* ... */ }
  };
}

Важные моменты для собеседования

1. globalThis vs window

// globalThis - новый стандарт (ES2020)
// window - специфично для браузера
// Используй globalThis для кросс-платформенного кода

2. var создаёт свойства window

var x = 1;
let y = 2;

console.log(window.x); // 1
console.log(window.y); // undefined

3. Web Workers имеют свой контекст

// В Web Worker не будет window, будет только globalThis и self
// Код: console.log(typeof window); // undefined
// Код: console.log(typeof self); // object

4. Strict mode влияет на глобальный объект

'use strict';
function test() {
  x = 1; // ReferenceError, не создаёт window.x
}