JavaScript Proxy — Самая недооценённая суперсила в JS ⚡

JavaScript — язык невероятно гибкий, и одна из его скрытых суперсил — это Proxy. Этот инструмент позволяет перехватывать и настраивать поведение объектов.

Если вы до сих пор обходились без Proxy, самое время взглянуть на него повнимательнее.

Что такое Proxy?

Proxy — это объект-обёртка, который «ставится между вами и целевым объектом».

С помощью Proxy вы можете:

• Контролировать чтение свойств
• Перехватывать запись свойств
• Отслеживать удаление свойств
• Настраивать другие действия с объектом

Можно думать о Proxy как о middleware для объекта 🧩.

Основы синтаксиса

Создать Proxy очень просто. Рассмотрим базовый пример:

const user = {
  name: "Dev",
  age: 28,
};

const proxyUser = new Proxy(user, {
  get(target, prop) {
    return prop in target ? target[prop] : "😵 Property not found!";
  },
});

console.log(proxyUser.name);  // "Dev"
console.log(proxyUser.email); // "😵 Property not found!"

Разбор кода

1. target — это оригинальный объект (user), за которым мы наблюдаем.
2. handler — объект с функциями, которые «ловят» действия с target.
3. get — ловушка для чтения свойств. В примере, если свойства нет — возвращаем сообщение об ошибке.

Почему Proxy так мощен

1. Валидация данных на лету

const user = { age: 25 };

const proxyUser = new Proxy(user, {
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    target[prop] = value;
    return true;
  },
});

proxyUser.age = 30;   // OK
proxyUser.age = "30"; // Ошибка!

2. Динамические свойства и значения по умолчанию

const defaults = { role: "guest" };
const user = { name: "Alice" };

const proxyUser = new Proxy(user, {
  get(target, prop) {
    return prop in target ? target[prop] : defaults[prop] || null;
  },
});

console.log(proxyUser.role); // "guest"
console.log(proxyUser.name); // "Alice"

3. Логирование и отладка

const user = { name: "Dev" };

const proxyUser = new Proxy(user, {
  get(target, prop) {
    console.log(`Property "${prop}" was accessed`);
    return target[prop];
  },
});

console.log(proxyUser.name);
// В консоли: Property "name" was accessed

4. Защита объекта от изменений

const user = { name: "Dev" };

const proxyUser = new Proxy(user, {
  set(target, prop, value) {
    console.log(`Trying to change ${prop}`);
    return false; // запрещаем изменения
  },
});

proxyUser.name = "Hacker"; // Ничего не изменится

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

• Для динамического поведения объектов
• Для валидации данных и защиты от ошибок
• Для логирования и отладки
• Для реализации реактивных систем, как в Vue.js

Proxy — это мощный инструмент, который часто недооценивают. Он позволяет писать гибкий, защищённый и понятный код, а иногда даже заменяет сложные паттерны вроде getter/setter