🔧 Proxy в JavaScript и TypeScript: 7 способов использования

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

Что такое Proxy в JavaScript

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

Предположим, у нас есть обычный объект:

Когда мы обращаемся к свойствам этого объекта или изменяем их, это происходит напрямую. Но что, если мы хотим добавить какую-то дополнительную логику при каждом обращении или изменении? Здесь на помощь приходит Proxy.

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

• Чтение свойств объекта.
• Запись новых значений в свойства.
• Удаление свойств.
• Перебор свойств объекта.
• Вызов функций (если объект является функцией).

Простейший пример использования Proxy с JavaScript выглядит так:

А так можно переписать этот пример на TypeScript:

Для чего можно использовать Proxy

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

• Валидация — можно использовать Proxy для проверки входных данных перед их присвоением свойствам объекта.
• Ленивая загрузка — Proxy позволяет отсрочить загрузку данных до того момента, когда они действительно нужны.
• Обработка ошибок — можно перехватывать исключения, возникающие при работе с объектом, и обрабатывать их соответствующим образом.
• Логирование — Proxy помогает легко добавить логирование всех операций с объектом без изменения самого объекта.
• Прокси-серверы и API — Proxy служит для создания прозрачных прокси-серверов или API, которые могут изменять поведение запросов и ответов.

Рассмотрим несколько примеров подробнее.

👨‍💻🎨 Библиотека фронтендера

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

Автозаполнение свойств

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

В этом примере у нас есть объект профиля пользователя с именем, фамилией и полным именем, которое генерируется автоматически при обращении к нему:

Подсчет количества операций

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

Создание неизменяемых объектов

С помощью Proxy можно создавать неизменяемые объекты: любая попытка изменить свойства такого объекта после создания будет вызывать ошибку. В этом примере создается функция createImmutable, которая принимает объект и возвращает его неизменяемую версию:

Статья по теме

🆕 JavaScript эволюционирует: новые методы и функции для эффективной разработки

Создание текучего интерфейса с цепочкой вызовов методов

Текучий интерфейс позволяет вызывать методы объекта цепочкой:

Умное кэширование

В этом примере данные извлекаются или вычисляются по требованию, а затем хранятся для быстрого последующего доступа:

Динамическая валидация свойств

Proxy можно использовать для создания объектов с динамической валидацией свойств — для обеспечения целостности данных и предотвращения ошибок:

Отслеживание изменений

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

Недостатки использования Proxy

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

• Производительность. Использование Proxy может снижать производительность, особенно при частых операциях, потому что каждая операция с проксированным объектом должна проходить через обработчик.
• Сложность. С большой мощью приходит большая сложность. Некорректное использование Proxy может привести к трудноустранимым проблемам и проблемам с поддержкой кода.
• Совместимость. Proxy невозможно полифилить для старых браузеров, которые не поддерживают функции ES6, поэтому не стоит их использовать в средах, требующих широкой совместимости.

В заключение

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

***

Хотите освоить современную веб-разработку и создать свой первый интернет-магазин? Курс Frontend Basic от Poglib Academy предлагает 26 видеоуроков и 28 практических заданий, которые помогут вам изучить HTML, CSS, JavaScript и React.js за 2 месяца, даже если вы начинаете с нуля.

Интересно, хочу попробовать

(function () { let link = document .getElementById ("d659d70e-80a0-4882-b016-f2cf093a0bcc-https://proglib.io/w/e364d01d-54"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();