Hack Frontend Community

Что такое объект Proxy в JavaScript

Proxy — это встроенный объект в JavaScript, позволяющий перехватывать и переопределять поведение других объектов. Вы можете «обернуть» объект и управлять доступом к его свойствам, их изменением, удалением, вызовом функций и многим другим.

Проще говоря, Proxy — это как «прослойка» между объектом и его использованием.

Синтаксис

const proxy = new Proxy(target, handler);
  • target — объект, который вы оборачиваете.
  • handler — объект с функциями-перехватчиками (т.н. "traps"), например: get, set, has, deleteProperty.

Пример: логгирование доступа к свойствам

const user = { name: "Alice", age: 25 };

const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Чтение свойства "${prop}"`);
    return target[prop];
  },
});

console.log(proxy.name); // Чтение свойства "name" → "Alice"

Часто используемые перехватчики (traps)

TrapОписание
get()Чтение свойства
set()Запись значения в свойство
has()Оператор in
deleteProperty()Удаление свойства (delete)
apply()Вызов функции
construct()Вызов через new
defineProperty()Работа с Object.defineProperty()
getOwnPropertyDescriptor()Получение описания свойства

Пример: валидация значений

const user = {
  name: "Alice",
  age: 25
};

const validatedUser = new Proxy(user, {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Возраст должен быть числом");
    }
    target[prop] = value;
    return true;
  }
});

validatedUser.age = 30; // OK
validatedUser.age = "много"; // Ошибка

Когда использовать Proxy

  • Для реактивности данных (Vue, MobX)
  • Для валидации и логирования
  • Для создания динамических API
  • Для добавления мета-информации при доступе к объектам
  • Для ловли ошибок или защиты объекта от неправильного использования