Как можно применять proxy в Frontend?

Proxy на фронтенде применяют для: реактивности (Vue/MobX), валидации, значений по умолчанию, логирования доступа, иммутабельности (Immer), защиты объектов, отслеживания изменений.

Применения Proxy

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

Отслеживать чтение (зависимости) и запись (обновления) — основа Vue 3, MobX:

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

Валидация при записи

const user = new Proxy({}, {
  set(obj, prop, val) {
    if (prop === 'age' && val < 0) throw new Error('Возраст ≥ 0');
    obj[prop] = val;
    return true;
  },
});

Значения по умолчанию

const withDefault = new Proxy({}, {
  get(obj, prop) { return prop in obj ? obj[prop] : 'default'; },
});

Логирование/отладка доступа

Перехват чтения/записи для трассировки.

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

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

Защита (read-only)

const readonly = new Proxy(obj, {
  set() { throw new Error('read-only'); },
});

Отрицательные индексы, API-обёртки

// arr[-1] через Proxy; автогенерация методов API-клиента

Ловушки (traps)

get, set, has, deleteProperty, apply (для функций), construct и др.

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

Proxy на фронте применяют для: реактивности (Vue 3, MobX — перехват чтения/записи), валидации при записи, значений по умолчанию, логирования доступа, иммутабельности (Immer — draft-Proxy в Redux Toolkit), read-only защиты, отслеживания изменений, обёрток API. Перехват через ловушки (get/set/has/deleteProperty).