Proxy и Reflect

Перехват и переопределение операций над объектами.

Зачем нужно

Proxy оборачивает объект и перехватывает операции (чтение, запись, удаление). Reflect — набор стандартных реализаций этих операций. Основа реактивности во Vue 3.

Где используется

• Реактивные системы (Vue 3 reactivity)
• Валидация данных при записи
• Логирование доступа к свойствам

Code

// Базовый Proxy
const user = { name: 'Anton', age: 25 };

const proxy = new Proxy(user, {
  get(target, prop) {
    console.log(`Reading ${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    return Reflect.set(target, prop, value);
  },
  deleteProperty(target, prop) {
    console.log(`Deleting ${prop}`);
    return Reflect.deleteProperty(target, prop);
  }
});

proxy.name;       // логирует "Reading name"
proxy.age = 30;   // OK
proxy.age = 'old'; // TypeError

// has trap
const range = new Proxy({}, {
  has(target, prop) {
    const n = Number(prop);
    return n >= 1 && n <= 100;
  }
});
50 in range; // true

// Reflect — вызов стандартного поведения
Reflect.get(obj, 'prop');
Reflect.set(obj, 'prop', value);
Reflect.has(obj, 'prop');

Связанные темы

• Объекты
• Observer Pattern
• ES6+ -- обзор нововведений по годам

Ресурсы

• MDN — Proxy

---

🎓 Источник: Proxy и Symbol в JavaScript

• 📅 2018-11-26 · YouTube
• Тезисы: Proxy — это metaprogramming layer. Ловушки (traps) перехватывают internal methods: get/set/has/deleteProperty/ownKeys/construct/apply. Symbol — уникальные ключи для системных протоколов

⚡ Источник: ⎡coding 08⎦ JavaScript Live Coding Proxy - Или мы настоящие костоломы · AsForJS

• 📅 2023-10-15 · YouTube
• Тезисы:
  • Proxy и Reflect — это два аспекта одной системы. Reflect — функциональное API над internal methods
  • В trap всегда передавайте операцию через Reflect — это сохранит правильный receiver и invariant'ы
  • new Proxy(target, {}) с пустым handler — прозрачный прокси, но даже он ломает оптимизации V8

⚡ Источник: ⎡coding 09⎦ JavaScript Live Coding Proxy - Или костоломы возвращаются · AsForJS

• 📅 2023-10-16 · YouTube
• Тезисы: invariants Proxy — что нельзя нарушить (если target sealed, прокси не может выдавать другие ключи). Список инвариантов в спеке для каждого trap