Proxy и Reflect в JavaScript: контроль над объектами

В JavaScript объекты обычно работают предсказуемо: мы читаем свойства, записываем их, удаляем и всё. Но иногда нужно перехватить эти операции: например, для валидации данных, логирования или защиты объекта.

Для этого есть Proxy и Reflect.

1. Что такое Proxy?

Proxy позволяет создать «обёртку» вокруг объекта и управлять его поведением через ловушки (traps).

Пример: логируем все обращения к свойствам:

const user = { name: 'Тигран', age: 20 };

const proxyUser = new Proxy(user, {
  get(target, prop) {
    console.log(`Чтение свойства: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Запись свойства: ${prop} = ${value}`);
    target[prop] = value;
    return true;
  }
});

console.log(proxyUser.name);  // Чтение свойства: name
proxyUser.age = 21;           // Запись свойства: age = 21

2. Для чего нужен Reflect?

Reflect — это встроенный объект, который содержит «чистые» методы для работы с объектами: get, set, has, deleteProperty и др.

Обычно его используют внутри Proxy, чтобы аккуратно передавать управление.

Пример с валидацией:

const product = { price: 100 };

const proxyProduct = new Proxy(product, {
  set(target, prop, value) {
    if (prop === 'price' && value < 0) {
      throw new Error('Цена не может быть отрицательной!');
    }
    return Reflect.set(target, prop, value);
  }
});

proxyProduct.price = 200; // работает
proxyProduct.price = -50; // ошибка

3. Практические применения

• Валидация (как в примере с ценой).
• Логирование и отладка: можно отслеживать обращения к объектам.
• Защита: сделать объект «read-only».
• Реактивность: в Vue.js (Composition API) реактивные объекты сделаны через Proxy.

Итог

Proxy + Reflect = мощный инструмент для управления объектами. Это уровень «под капотом», который редко нужен в простых проектах, но даёт разработчику огромную гибкость.