javascript

Использование Proxy и Reflect для создания реактивных объектов в JavaScript

  • вторник, 4 марта 2025 г. в 00:00:02
https://habr.com/ru/companies/gnivc/articles/887510/

Привет, на связи снова Дмитрий, React-разработчик, и сегодня захотелось написать про Proxy и Reflect.

Что такое Proxy в JavaScript?

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

Как это работает?

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

Ловушки — это методы, которые перехватывают различные действия с объектами, такие как: чтение свойств, их запись и другие.

Синтаксис создания Proxy

Для создания прокси-объекта используется конструктор Proxy, который принимает два аргумента:

Целевой объект (target) - объект, для которого создается прокси и с которым будут взаимодействовать.

Обработчик (handler) - объект, содержащий ловушки (traps), которые определяют, как перехватывать различные операции с целевым объектом.

let proxy = new Proxy(target, handler);

Перехват стандартных операций

С помощью Proxy можно перехватывать несколько типов стандартных операций с объектом. Каждая из этих операций реализована как метод в обработчике (handler). Вот некоторые из них:

  • get(target, prop): Перехватывает доступ к свойствам объекта. Вызывается, когда пытаемся получить значение свойства объекта.

  • set(target, prop, value): Перехватывает операцию записи в свойство объекта. Вызывается, когда пытаемся изменить значение свойства объекта.

  • deleteProperty(target, prop): Перехватывает удаление свойства объекта. Вызывается, когда используется оператор delete.

  • has(target, prop): Перехватывает проверку наличия свойства с помощью оператора in.

  • apply(target, thisArg, argumentsList): Перехватывает вызов функции.

  • construct(target, argumentsList): Перехватывает создание экземпляра функции через new.

Давайте рассмотрим пример простого использования Proxy для перехвата операций чтения и записи свойств объекта:

// Целевой объект
const target = {
  message: "Hello, world!"
};

// Обработчик
const handler = {
  // Ловушка для получения свойства
  get(target, prop) {
    console.log(`Получено свойство: ${prop}`);
    return prop in target ? target[prop] : Свойство ${prop} не найдено;
  },

  // Ловушка для записи в свойство
  set(target, prop, value) {
    console.log(`Записано значение ${value} в свойство: ${prop}`);
    target[prop] = value;
    return true;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message);
proxy.message = "Привет, мир!";

В этом примере мы создали простой объект target с одним свойством message. Затем создали прокси-объект proxy, который перехватывает доступ к свойствам объекта и логирует эти операции. Каждый раз, когда мы читаем или записываем значение в свойство, выводится сообщение в консоль.

Подытожим:

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

Использование прокси позволяет внедрять дополнительные действия в стандартный процесс работы с объектами, например: логирование, валидацию, создание реактивных объектов и другие.

Как Proxy помогает создать реактивные объекты?

Реактивность в контексте JavaScript означает способность объектов автоматически обновляться и реагировать на изменения. Это полезно, например, при разработке пользовательских интерфейсов, когда нужно обновить отображение данных в ответ на изменения в состоянии. Вместо того чтобы вручную обновлять UI каждый раз, когда меняются данные, можно использовать реактивность, чтобы изменения автоматически отражались в UI.

Одним из способов реализации реактивности в JavaScript является использование объекта Proxy. С помощью Proxy можно выполнять дополнительные действия, такие как уведомление об изменениях или выполнение асинхронных задач.

Для того чтобы создать реактивный объект, необходимо реализовать механизм, который будет отслеживать изменения в данных и уведомлять об этом другие части системы. Это можно сделать с использованием ловушки set для отслеживания изменений и добавления механизма подписки на изменения.

Допустим, мы создаем реактивный объект для отслеживания изменений в данных. Мы будем использовать Proxy для перехвата доступа к свойствам объекта, а также добавим механизм подписки, чтобы уведомить слушателей о каждом изменении.

// Целевой объект, который мы будем отслеживать
  const target = {
    name: 'Иван',
    age: 25,
  };

  // Массив подписчиков, которые будут уведомлены об изменениях
  const subscribers = [];

  //подписка
  function subscribe(callback) {
    subscribers.push(callback);
  }
  //Обработчик
  const handler = {
    // Ловушка для чтения свойства
    get(target, prop) {
      console.log(`Получено свойство: ${prop}`);
      return prop in target ? target[prop] : undefined;
    },

    // Ловушка для записи свойства
    set(target, prop, value) {
      console.log(`Записано значение ${value} в свойство: ${prop}`);
      target[prop] = value;

      // Уведомляем всех подписчиков об изменении
      subscribers.forEach((callback) => callback(prop, value));
      return true;
    },
  };

  const proxy = new Proxy(target, handler);

  subscribe((prop, value) => {
    console.log(`Свойство ${prop} изменено на ${value}`);
  });

  console.log(proxy.name);

  proxy.age = 26; 
  proxy.name = 'Петр';

Целевой объект — это объект, который мы хотим отслеживать. В данном примере он содержит два свойства:name и age.

Подписка: мы создаем массив subscribers, где будем хранить функции, которые должны быть уведомлены об изменении. Функция subscribe позволяет добавлять новых подписчиков.

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

В итоге:

Когда мы читаем значение свойства через прокси (например, proxy.name), срабатывает ловушка get.

Когда мы записываем новое значение в свойство (например, proxy.age = 26), срабатывает ловушка set, и каждый подписчик получает уведомление об изменении. В данном случае это просто консолька, в реальном же случае может быть все, что угодно.

Создание прокси: с помощью Proxy создается новый объект proxy, который позволяет отслеживать изменения в целевом объекте.

Что такое Reflect и как он работает?

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

Описание объекта Reflect: что это и как он связан с Proxy

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

Связь с Proxy: Reflect используется в связке с Proxy для реализации ловушек в объекте прокси. Когда вы создаете прокси, ловушки (например, get, set, deleteProperty) могут использовать методы из Reflect, чтобы выполнить стандартные операции на целевом объекте. Это позволяет избежать рекурсии или зацикливания, если нужно выполнить стандартное поведение (например, get или set), а затем дополнять его логикой.

Преимущества использования Reflect вместо стандартных операций

  • Методы Reflect более явные в сравнении с использованием стандартных операций. Например, Reflect.set(obj, prop, value) явно показывает, что мы пытаемся установить значение свойства на объекте, в то время как с использованием оператора присваивания (obj[prop] = value) это может быть менее очевидным.

  • Обработка ошибок: Методы Reflect всегда возвращают true или false, что позволяет легко обрабатывать ошибки. В случае использования стандартных операций ошибка может привести к неожиданному поведению.

  • Интерсепторы для Proxy: Reflect облегчает работу с прокси-объектами, предоставляя методы, которые позволяют перехватывать стандартные операции и изменять их поведение.

Пройдемся по методам Reflect

Объект Reflect предоставляет ряд методов, которые соответствуют основным операциям JavaScript с объектами. Вот несколько из них:

Reflect.get(target, prop) — аналог операции чтения свойства. Возвращает значение свойства prop объекта target.

Reflect.set(target, prop, value) — аналог операции записи. Устанавливает значение value для свойства prop объекта target.

Reflect.has(target, prop) — аналог операции in. Проверяет, существует ли свойство prop в объекте target.

Reflect.deleteProperty(target, prop) — аналог операции delete. Удаляет свойство prop из объекта target.

Reflect.apply(target, thisArg, args) — аналог вызова функции. Позволяет вызвать функцию с указанным контекстом this и аргументами args.

Reflect.construct(target, args) — аналог оператора new. Создает новый экземпляр объекта с помощью конструктора.

Как Proxy и Reflect работают вместе?

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

В чем преимущества использовать Reflect внутри ловушек Proxy?

  • Делегирование стандартных операций: Reflect позволяет легко делегировать выполнение стандартных операций обратно к оригинальному объекту, избегая рекурсии или зацикливания.

  • Снижение дублирования кода: Использование Reflect устраняет необходимость в написании повторяющегося кода для выполнения стандартных операций, таких как чтение или запись свойств.

  • Улучшение читаемости кода: Явное использование методов Reflect делает код более понятным и логичным, облегчая понимание того, что происходит в каждой ловушке.

  • Консистентность: Методы Reflect работают точно так же, как стандартные операции, но более предсказуемо и безопасно, возвращая значения (true или false) вместо выброса исключений.

Пример взаимодействия Proxy и Reflect для реализации реактивности

Рассмотрим пример использования Proxy и Reflect для создания простого реактивного объекта, который уведомляет подписчиков об изменениях в свойствах.

// Хранилище подписчиков
const subscribers = new Map();

// Функция добавления подписчика на свойство
function subscribe(property, callback) {
  if (!subscribers.has(property)) {
    subscribers.set(property, []);
  }
  subscribers.get(property).push(callback);
}

const reactiveHandler = {
  get(target, prop, receiver) {
    console.log(`Чтение свойства "${prop}"`);
    // Используем Reflect для делегирования стандартной операции get
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Изменение свойства "${prop}" на "${value}"`);
    const result = Reflect.set(target, prop, value, receiver);
    if (result && subscribers.has(prop)) {
      // Уведомляем подписчиков об изменении свойства
      subscribers.get(prop).forEach((callback) => callback(value));
    }
    return result;
  },
};

const data = {
  name: 'Иван',
  age: 30,
};

// Создаем Proxy
const reactiveData = new Proxy(data, reactiveHandler);

// Подписываемся на изменения свойства name
subscribe('name', (newValue) => {
  console.log(`Имя изменилось на: ${newValue}`);
});

console.log(reactiveData.name);
reactiveData.name = 'Алексей';

  • Ловушка get используется для перехвата чтения свойства и делегирования выполнения через Reflect.get.

  • Ловушка set перехватывает запись свойства, выполняет стандартную операцию через Reflect.set, а затем уведомляет подписчиков об изменении.

  • Использование Reflect позволяет избежать дублирования кода, делегируя выполнение стандартных операций.

Использование Reflect в ловушках get и set для делегирования стандартных операций

В примере выше Reflect используется внутри ловушек get и set для выполнения стандартных операций над объектом. Это гарантирует, что объект будет работать как обычно, если не требуется дополнительная логика.

Это важно потому что:

  • Использование Reflect.get и Reflect.set позволяет избежать бесконечной рекурсии, которая может возникнуть, если внутри ловушки напрямую обратиться к тому же свойству.

  • Это упрощает реализацию прокси-логики, делая код более читаемым и поддерживаемым.

Рассмотрим еще один пример:

const handler = {
  get(target, prop, receiver) {
    console.log(`Получение значения свойства "${prop}"`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Установка значения свойства "${prop}" на "${value}"`);
    return Reflect.set(target, prop, value, receiver);
  },
};

const obj = {
  title: 'Статья',
  views: 100,
};

const proxy = new Proxy(obj, handler);

console.log(proxy.title);
proxy.views = 200;
console.log(proxy.views);

Снижение дублирования кода и улучшение читаемости

Использование Reflect снижает дублирование кода и делает ловушки более читаемыми. Вместо написания сложной логики для управления поведением объекта Reflect позволяет сконцентрироваться на дополнительной логике (например, логировании или уведомлении), оставляя реализацию стандартных операций самому Reflect.

Пример использования без Reflect:

const handler = {
  get(target, prop) {
    console.log(`Чтение свойства "${prop}"`);
    return target[prop]; // Прямая работа с объектом
  },
  set(target, prop, value) {
    console.log(`Изменение свойства "${prop}" на "${value}"`);
    target[prop] = value;
    return true; // Нужно вернуть true вручную
  },
};

Использование с Reflect:

const handler = {
  get(target, prop, receiver) {
    console.log(`Чтение свойства "${prop}"`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Изменение свойства "${prop}" на "${value}"`);
    return Reflect.set(target, prop, value, receiver);
  },
};

В чем разница?

  • В первом варианте код более громоздкий и менее гибкий.

  • Во втором варианте Reflect выполняет стандартные операции, оставляя в ловушках только дополнительную логику.

Заключение

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

PS:

Proxy активно используется в MobX для реализации реактивности. MobX применяет Proxy для отслеживания изменений в наблюдаемых объектах и автоматического обновления зависимых вычислений и компонентов.

Как это работает?

  • MobX оборачивает объекты в Proxy, чтобы перехватывать операции чтения и записи свойств. Это позволяет MobX "запоминать" зависимости и реагировать на изменения.

  • При чтении свойства через get MobX отслеживает зависимости. Это означает, что вычисляемые значения (computed) и наблюдатели (reactions) будут автоматически обновляться, если изменится используемое свойство.

  • При изменении свойства через set MobX запускает реакции, уведомляя всех подписчиков о необходимости обновления.

Об этом давайте в следующей статье.