Чем поможет Proxy на getter?

Роль Proxy в перехвате геттеров: от контроля до метапрограммирования

Proxy — это мощный механизм в JavaScript, который позволяет создавать "ловушки" (traps) для операций над объектами, включая чтение свойств через геттеры. Его помощь в контексте геттеров выходит далеко за рамки простого перехвата доступа и открывает возможности для продвинутого метапрограммирования, валидации и создания реактивных систем.

Ключевые сценарии применения Proxy с getter

1. Ленивые вычисления и мемоизация

Proxy позволяет отложить вычисление ресурсоёмкого свойства до момента первого обращения, а затем кэшировать результат.

const createLazyObject = (expensiveComputation) => {
  let cachedValue = null;
  let computed = false;

  return new Proxy({}, {
    get(target, prop) {
      if (prop === 'value') {
        if (!computed) {
          console.log('Выполняем тяжёлые вычисления...');
          cachedValue = expensiveComputation();
          computed = true;
        }
        return cachedValue;
      }
      return target[prop];
    }
  });
};

const obj = createLazyObject(() => {
  // Имитация сложных вычислений
  let sum = 0;
  for (let i = 0; i < 1e6; i++) sum += i;
  return sum;
});

console.log(obj.value); // "Выполняем тяжёлые вычисления..." → 499999500000
console.log(obj.value); // Мгновенно возвращает кэшированное значение

2. Валидация и контроль доступа

Вы можете валидировать не только факт доступа, но и контекст, в котором происходит чтение (например, права пользователя).

const createSecureObject = (data, userRole) => {
  return new Proxy(data, {
    get(target, prop, receiver) {
      // Проверяем доступ к защищённым полям
      if (prop.startsWith('_') && userRole !== 'admin') {
        throw new Error(`Доступ к приватному свойству "${prop}" запрещён`);
      }

      // Логируем доступ к важным свойствам
      if (prop === 'balance' || prop === 'transactions') {
        console.log(`[AUDIT] User "${userRole}" accessed "${prop}"`);
      }

      return Reflect.get(target, prop, receiver);
    }
  });
};

const bankAccount = { _pin: '1234', balance: 1000, name: 'Иван' };
const userAccount = createSecureObject(bankAccount, 'user');

console.log(userAccount.name); // "Иван"
console.log(userAccount.balance); // [AUDIT] User "user" accessed "balance" → 1000
console.log(userAccount._pin); // Error: Доступ к приватному свойству "_pin" запрещён

3. Динамические и вычисляемые свойства

Создание свойств, которые не существуют физически в объекте, но вычисляются на лету на основе других данных или паттернов.

const createDynamicAPI = (baseURL) => {
  const endpoints = {
    users: `${baseURL}/users`,
    posts: `${baseURL}/posts`
  };

  return new Proxy({}, {
    get(target, prop) {
      // Если endpoint известен — возвращаем его
      if (endpoints[prop]) {
        return endpoints[prop];
      }

      // Динамически создаём endpoint для ресурсов вида 'resource/:id'
      if (typeof prop === 'string' && prop.startsWith('get')) {
        const resource = prop.replace('get', '').toLowerCase();
        return (id) => `${baseURL}/${resource}/${id}`;
      }

      // Fallback к стандартному поведению
      return target[prop];
    }
  });
};

const api = createDynamicAPI('https://api.example.com');
console.log(api.users); // "https://api.example.com/users"
console.log(api.getPost(42)); // Функция, возвращающая "https://api.example.com/post/42"
console.log(api.getUser(100)()); // "https://api.example.com/user/100"

4. Реактивные системы и отслеживание зависимостей

Это основа современных реактивных фреймворков (Vue 3, MobX). Proxy отслеживает, какие свойства читаются, чтобы автоматически перевычислять зависимости.

const createReactive = (obj, onChange) => {
  const dependencies = new Map();

  return new Proxy(obj, {
    get(target, prop, receiver) {
      // Здесь можно собирать информацию о зависимостях
      if (trackingEnabled) {
        addToDependencies(prop);
      }
      return Reflect.get(target, prop, receiver);
    }
  });
};

Преимущества перед обычными геттерами

• Динамичность: Не нужно заранее определять свойства для перехвата
• Глобальный контроль: Единый обработчик для всех свойств объекта
• Гибкость: Возможность перехватывать доступ к несуществующим свойствам
• Композиция: Легко комбинируется с другими traps (set, has, deleteProperty)

Важные ограничения и нюансы

1. Производительность: Использование Proxy добавляет overhead. Для высокопроизводительных операций в горячих путях кода это может быть критично.
2. Определяемость: Proxy скрывает исходный объект. Object.keys(), Object.getOwnPropertyNames() будут работать с proxy-объектом, а не с целевым.
3. Совместимость: Хотя Proxy поддерживается всеми современными браузерами, в очень старых средах (IE) он недоступен.

Практический пример: Дебаггинг и логирование

const createLoggedObject = (obj, label = 'Object') => {
  return new Proxy(obj, {
    get(target, prop, receiver) {
      const value = Reflect.get(target, prop, receiver);
      
      // Логируем только обращение к "интересным" свойствам
      if (typeof value === 'function' || prop.startsWith('data')) {
        console.log(`[${label}] Accessed property "${prop}":`, value);
      }
      
      return typeof value === 'function' 
        ? value.bind(target) // Сохраняем контекст для методов
        : value;
    }
  });
};

const service = createLoggedObject({
  data: { users: [] },
  fetchData() { return this.data; },
  config: { timeout: 5000 }
});

service.fetchData(); // [Object] Accessed property "fetchData": function fetchData()
console.log(service.data.users); // [Object] Accessed property "data": {users: Array(0)}

Итог: Proxy для геттеров — это не просто альтернатива стандартным геттерам, а качественно иной уровень абстракции. Он превращает пассивные объекты в интеллектуальные сущности, способные контролировать доступ, адаптироваться к контексту и реализовывать сложные паттерны поведения, что особенно востребовано при создании библиотек, фреймворков и сложных архитектурных решений.