Глобальный объект JavaScript Печать
Добавил(а) microsin   

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

window. В браузере глобальным объектом является window:

window.alert('Привет!');  // Можно вызывать без window
alert('Привет!');         // То же самое

console.log(window.innerWidth);  // Ширина окна браузера
console.log(window.document);    // DOM-документ

Глобальные переменные становятся свойствами объекта window:

var name = 'John';
console.log(window.name);  // 'John'

let age = 30;
console.log(window.age);   // undefined (let/const не добавляются)

global. В Node.js глобальным объектом является global:

global.console.log('Hello');   // Можно без global
console.log('Hello');          // То же самое

console.log(global.process);   // Информация о процессе
console.log(global.__dirname); // Путь к текущей директории

globalThis. Объект globalThis обеспечивает стандартизированный способ доступа к глобальному объекту в любой среде:

// Работает везде: браузер, Node.js, Deno, Bun.
// Следующая строка позволяет проверить, в какой среде работает код:
console.log(globalThis);  // window в браузере, global в Node.js

globalThis.myVar = 42;
console.log(myVar);       // 42

Например, следующие три строки кода делают одно и то же в среде браузера:

window.alert("Привет");
globalThis.alert("Привет");
alert("Привет");

Однако следует иметь в виду, что несмотря на наличие globalThis, набор функций и методов в разных окружениях может отличаться. Например функция alert для JavaScript доступна в браузере, но в Node.js такой функции нет.

Основные свойства глобального объекта:

Свойство Описание
Infinity Бесконечность
NaN Not-a-Number
undefined Неопределённое значение
null Пустое значение
globalThis Ссылка на глобальный объект

Основные функции:

Функция Описание
eval() Выполняет строку как код
isFinite() Проверяет, конечно ли число
isNaN() Проверяет, является ли значение NaN
parseFloat() Преобразует строку в число с плавающей точкой
parseInt() Преобразует строку в целое число
encodeURI() Кодирует URI
decodeURI() Декодирует URI
encodeURIComponent() Кодирует компонент URI
decodeURIComponent() Декодирует компонент URI

Встроенные конструкторы:

Object    // Базовый объект
Array     // Массивы
String    // Строки
Number    // Числа
Boolean   // Булевы значения
Function  // Функции
Date      // Даты
RegExp    // Регулярные выражения
Error     // Ошибки
Promise   // Промисы
Map       // Коллекции ключ-значение
Set       // Коллекции уникальных значений
Symbol    // Уникальные идентификаторы
BigInt    // Большие целые числа

[Особенности и нюансы]

1. var vs let/const

var a = 1;        // Добавляется в globalThis
let b = 2;        // НЕ добавляется
const c = 3;      // НЕ добавляется

console.log(globalThis.a);  // 1
console.log(globalThis.b);  // undefined

2. Безопасность

Глобальный объект доступен всем, что может привести к конфликтам:

// Плохо: загрязнение глобальной области
var utils = { ... };
var config = { ... };

// Хорошо: изолируйте код
(function() {
  var utils = { ... };  // Локальная переменная
  // ...
})();

3. Проверка окружения

if (typeof window !== 'undefined') {
  // Браузер
  console.log('Браузерная среда');
} else if (typeof global !== 'undefined') {
  // Node.js
  console.log('Node.js среда');
}

// Универсальный способ
if (typeof globalThis !== 'undefined') {
  console.log('Современная среда');
}

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

Глобальные конфигурации:

// config.js
globalThis.APP_CONFIG = {
  API_URL: 'https://api.example.com',
  TIMEOUT: 5000,
  DEBUG: true
};

// main.js
console.log(APP_CONFIG.API_URL);  // 'https://api.example.com'

Полифиллы:

// Добавление метода, если он отсутствует
if (!String.prototype.capitalize) {
  String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  };
}

console.log('hello'.capitalize());  // 'Hello'

Полифилл (от англ. polyfill — "заплатка") — это код, который добавляет в старые браузеры или среды выполнения современные функции JavaScript, чтобы они вели себя так же, как в новых версиях.

Простыми словами: это "мост", который позволяет использовать новые фичи там, где их ещё нет.

[Зачем нужны полифиллы?]

Проблема: разные браузеры поддерживают разные версии JavaScript.

// Метод Array.includes() появился в ES2016
// В старых браузерах (например, IE11) его нет!

const arr = [1, 2, 3];
console.log(arr.includes(2));  // ❌ Ошибка в IE11

Решение: добавить полифилл, который эмулирует этот метод.

// Полифилл для Array.includes()
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement) {
    return this.indexOf(searchElement) !== -1;  };
}

// Теперь работает везде! ✅
const arr = [1, 2, 3];
console.log(arr.includes(2));  // true

Примеры популярных полифиллов:

1. Promise (ES6)

// Старые браузеры не поддерживают Promise
if (!window.Promise) {
  // Подключаем библиотеку-полифилл
  // Например, es6-promise или core-js
}

2. fetch (для HTTP-запросов)

// fetch не работает в IE
if (!window.fetch) {
  // Используем полифилл whatwg-fetch
  // или заменяем на XMLHttpRequest
}

3. Object.assign (ES6)

if (!Object.assign) {
  Object.assign = function(target, ...sources) {
    sources.forEach(source => {
      for (let key in source) {
        if (source.hasOwnProperty(key)) {
          target[key] = source[key];
        }
      }
    });
    return target;
  };
}

4. Array.from (ES6)

if (!Array.from) {
  Array.from = function(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
  };
}

[Как использовать полифиллы]

Способ 1: ручное добавление

< !-- Подключаем полифиллы вручную -->
< script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js">< /script>
< script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13/runtime.js">< /script>
< script src="your-app.js">< /script>

Способ 2: через сборщики (Webpack, Vite)

// В entry-файле приложения
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// Или только нужные полифиллы
import 'core-js/features/array/includes';
import 'core-js/features/promise';

Способ 3: автоматическое определение (Babel)

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',  // Автоматически добавляет полифиллы
      corejs: 3,
      targets: '> 0.25%, not dead'  // Поддерживаемые браузеры
    }]
  ]
};

Популярные библиотеки полифиллов:

Библиотека Описание
core-js Самая популярная библиотека полифиллов для JS
regenerator-runtime Для поддержки async/await и генераторов
whatwg-fetch Полифилл для fetch API
es6-shim Полифиллы для ES6 фич
polyfill.io Сервис, который динамически подгружает нужные полифиллы

Использование polyfill.io:

< !-- Автоматически подгружает только нужные полифиллы -->
< script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,
  Array.from,Object.assign">
< /script>

[Полифиллы vs Транспиляция]

  Полифилл Транспиляция
Что делает Добавляет отсутствующие функции Преобразует синтаксис нового JS в старый
Пример Добавляет `Array.includes()` Преобразует `const` → `var`, стрелочные функции → обычные
Инструменты core-js, polyfill.io Babel, TypeScript
Когда использовать Для новых методов и API Для нового синтаксиса

Пример:

// Исходный код (современный JS)
const double = (x) => x * 2;

// Транспиляция (Babel) → старый синтаксис
var double = function(x) { return x * 2; };

// Полифилл → добавляет метод, которого нет
if (!Array.prototype.find) {
  Array.prototype.find = function(callback) {
    // реализация...
  };
}

[Когда НЕ нужно использовать полифиллы]

1. Если поддерживаются только современные браузеры.

2. Если функция уже есть в окружении (проверяйте!).

3. Если производительность критична (полифиллы медленнее нативных реализаций).

Проверка поддержки:

// Проверяем, нужен ли полифилл
if (!String.prototype.trim) {
  // Добавляем полифилл
}

// Или с помощью Modernizr
if (!Modernizr.promises) {
  // Подключаем полифилл для Promise
}

Практический пример:

< !DOCTYPE html>
< html>
< head>
  < !-- 1. Проверяем поддержку -->
  < script>
    if (!window.Promise || !Array.prototype.includes) {
      // 2. Подключаем полифиллы
      document.write(
        '< script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3/minified.js">< \/script>'
      );
    }
  < /script>
< /head>
< body>
  < script>
    // 3. Используем современный код с уверенностью
    const data = [1, 2, 3, 4, 5];
    if (data.includes(3)) {
      Promise.resolve('Работает!')
        .then(msg => console.log(msg));
    }
  < /script>
< /body>
< /html>

Итог: полифилл это код-заплатка, который:

- Добавляет новые возможности в старые среды.
- Позволяет использовать современный JS без ограничений.
- Делает веб-приложения кроссплатформенными.

Главное правило: всегда проверяйте наличие функции перед добавлением полифилла и используйте автоматические инструменты (Babel + core-js) для управления ими.

Модули-одиночки

// Использование глобального объекта для синглтона
if (!globalThis.myApp) {
  globalThis.myApp = {
    state: {},
    init() { /* ... */ }  };
}

const app = globalThis.myApp;

Совет: избегайте загрязнения глобальной области. Используйте globalThis для кроссплатформенного кода и модули для изоляции.