PassFront
  1. PassFront
  2. База знаний
  3. Современный JS ES6+

Какие технологии написаны на основе Proxy?

Современный JS ES6+

На основе Proxy построены: реактивность Vue 3 и MobX 5+, иммутабельность Immer, валидация, наблюдаемые объекты, моки в тестах, автогенерация API-клиентов.

Что такое Proxy

Proxy перехватывает операции с объектом (чтение, запись, вызов) через «ловушки» (traps):

const proxy = new Proxy(target, {
  get(obj, prop) { /* перехват чтения */ },
  set(obj, prop, val) { /* перехват записи */ },
});

Технологии на Proxy

Реактивность

  • Vue 3 — реактивная система на Proxy: перехватывает чтение (сбор зависимостей) и запись (запуск обновлений).
  • MobX 5+ — observable через Proxy (отслеживание зависимостей).

Иммутабельность

  • Immer — позволяет писать «мутирующий» код на черновике (draft — Proxy), генерируя иммутабельное обновление. Используется в Redux Toolkit.

Валидация и защита

  • Проверка значений при записи, read-only объекты, логирование доступа.

Наблюдаемые структуры

  • Отслеживание изменений объектов (кастомная реактивность).

Тестирование

  • Моки/спаи — перехват вызовов.

API-клиенты

  • Автогенерация методов (обращение к несуществующему свойству → запрос).

Пример реактивности

const state = new Proxy({ count: 0 }, {
  set(obj, prop, val) {
    obj[prop] = val;
    rerender(); // реакция на изменение
    return true;
  },
});

Коротко для собеседования

На Proxy построены: реактивность Vue 3 и MobX 5+ (перехват чтения — сбор зависимостей, записи — обновления), Immer (иммутабельность через draft-Proxy, в Redux Toolkit), валидация/read-only объекты, наблюдаемые структуры, моки в тестах, автогенерация API-клиентов. Proxy перехватывает операции с объектом через traps (get/set).

Другие вопросы раздела