Что такое proxy javascript
JavaScript-прокси: и красиво, и полезно
В JavaScript, сравнительно недавно, появилась новая возможность, которая пока используется не особенно широко. Речь идёт о прокси-объектах. Прокси позволяют создавать обёртки для других объектов, организовывая перехват операций доступа к их свойствам и операций вызова их методов. Причём, это работает даже для несуществующих свойств и методов проксируемых объектов.
Первое знакомство с прокси-объектами
Начнём с основ. Вот простейший пример работы с прокси-объектом:
Этот код выводит следующее:
Прокси-объекты могут быть полезны для проверки атрибутов или выполнения подобных действий, но я думаю, что возможная сфера их применения гораздо шире. Например, я полагаю, что должны появиться новые фреймворки, которые используют прокси в своей базовой функциональности. В размышлениях обо всём этом у меня родились некоторые идеи, которыми я хочу поделиться.
SDK для API в 20-ти строках кода
Вооружившись этой идеей, можно проанализировать имя и аргументы вызываемого метода и динамически, во время выполнения программы, реализовать его функциональность.
Посмотрим на программное выражение этих рассуждений:
Тут хотелось бы отметить, что вышеприведённый пример вполне допустимо реализовать иначе. Его, например, можно оптимизировать. Скажем, динамически генерируемые функции можно кэшировать, что избавит нас от необходимости постоянно возвращать новые функции. Всё это не имеет прямого отношения к прокси-объектам, поэтому я, чтобы не перегружать примеры, привожу их именно в таком виде.
Выполнение запросов к структурам данных с помощью удобных и понятных методов
Предположим, есть массив с информацией о неких людях и с ним надо работать примерно так:
Подобное можно реализовать с помощью прокси. А именно, массив можно обернуть прокси-объектом, который анализирует вызовы методов и выполняет поиск запрошенных данных в массиве.
Вот как это может выглядеть:
Очень похоже на то, что тут показано, может выглядеть написание с использованием прокси-объектов библиотеки для работы с утверждениями вроде expect.
А вот ещё одна идея использования прокси-объектов. Она заключается в создании библиотеки для построения запросов к базе данных со следующим API:
Мониторинг асинхронных функций
Прокси-объекты позволяют перехватывать вызовы методов. Если вызов метода возвращает промис, возможности прокси позволяют узнать о том, когда этот промис разрешится. Эту возможность можно использовать для мониторинга асинхронных методов объекта и формирования статистических сведений по этим методам, которые, например, можно вывести в терминал.
Итоги
Прокси-объекты в JavaScript — это очень мощный инструмент. Кроме того, возможность динамической реализации методов на основе их имён добавляет коду ясности и читабельности. Однако, как и любой другой дополнительный уровень абстракции, прокси создают некоторую нагрузку на систему. Я ещё не анализировал их производительность, вы же, если планируете использовать их в продакшне, проверьте сначала, как это отразится на быстродействии вашего проекта. Но, как бы там ни было, ничто не мешает применять прокси-объекты в ходе разработки, реализуя с их помощью, например, мониторинг асинхронных функций в отладочных целях.
Уважаемые читатели! Вот скидочка специально для вас 🙂
Proxy — сокровище JavaScript
Sep 1, 2020 · 8 min read
И вот здесь вам нужен надёжный администрат о р. Вы хотите, чтобы он проверял почту и удалял спам до того, как вы приступите к чтению, а при получении посылки проверял содержимое с помощью профессионального оборудования, чтобы убедиться, что внутри нет бомбы. В этом примере администратор — наш заместитель, прокси. Пока мы выполняем свои задачи, администратор выполняет дополнительные.
Теперь вернёмся к JavaScript. Мы знаем, что JS — объектно-ориентированный язык, то есть мы не можем написать код, не используя объекты. Но объекты в JavaScript всегда работают без оболочки, с ними можно делать что угодно. Это, в свою очередь, делает код небезопасным.
Объект Proxy представлен в ECMAScript2015. С его помощью можно найти локального администратора для объекта и расширить исходные функции объекта. На самом простом уровне применение Proxy выглядит так:
Обработчик из примера выше:
get принимает три аргумента:
Если вы читали руководства по прокси, то, наверное, заметили, что я использую другие имена параметров. Я делаю это, чтобы упростить понимание примера.
Возвращаемое значение функции get — результат чтения этого свойства. Поскольку пока мы не хотим ничего менять, мы просто возвращаем значение свойства исходного объекта. Изменяем результат, когда необходимо. Например вот так:
Вот результаты чтения его свойств:
Проиллюстрирую практическое применение этого приёма. В дополнение к перехвату чтения свойств можно перехватывать их модификации:
Функция срабатывает при попытке задать значение свойству объекта:
В целом Proxy перехватывает 13 операций над объектами:
Если целевой объект — функция, можно применять две дополнительные операции перехвата:
Некоторые перехваты применяютсядовольно редко, поэтому я не буду вдаваться в подробности. Теперь посмотрим, на что прокси способен.
Отрицательные индексы массивов
Python и другие языки поддерживают доступ к элементам массива по отрицательному индексу. Отправная точка индекса — последний элемент массива, счёт идёт в обратном порядке, то есть:
Многие считают эту функцию очень полезной, но, к сожалению, она не поддерживается в JavaScript.
Эта функция оборачивает массив. Посмотрим на её применение:
Наша задача сделать так, чтобы когда пользователь хочет получить доступ к свойству, которое является индексом массива, и обнаруживается, что индекс отрицателен, свойство перехватывается и обрабатывается соответствующим образом. Если свойство не является индексом или индекс положительный, мы ничего не делаем. Напишем такой код:
Как обнаружить отрицательный индекс? Здесь легко ошибиться, поэтому я распишу подробнее. Прежде всего, метод get будет перехватывать доступ ко всем свойствам массива, включая доступ к его индексу и к другим свойствам массива. Операция, которая обращается к элементу в массиве, выполняется, только если имя свойства может быть преобразовано в целое число. Нам нужно перехватить эту операцию, чтобы получить доступ к элементам массива. Мы можем определить, является ли свойство массива индексом, проверив его преобразование в целое число:
Вот весь код функции:
И вывод на примере:
Валидация данных
Как мы знаем, JavaScript — слабо типизированный язык. Обычно при создании объекта объект остаётся открытым, то есть кто угодно может его изменить. Но в большинстве случаев значение свойства объекта должно соответствовать определённым условиям. Например, объект, записывающий пользовательскую информацию в поле возраст, должен быть целым числом больше нуля и меньше 150:
По умолчанию, однако, JavaScript не предоставляет механизм безопасности, и это значение при желании можно изменить:
Теперь попробуем изменить значение этого свойства и увидим, что механизм защиты работает:
Ассоциированное свойство
Свойства объекта связаны друг с другом. Например, для объекта, хранящего пользовательскую информацию, почтовый индекс и местоположение тесно связаны. Когда определён почтовый индекс пользователя, определено и его местоположение.
Чтобы угодить пользователям из разных стран, я использую отвлечённый пример. Предположим, местоположение и почтовый индекс соотносятся следующим образом:
Вот результат выражения их отношений в коде:
Затем рассмотрим такой пример:
Приватные свойства
Свойство _value выше рассматривается как приватное. Важно помнить, что это просто соглашение, то есть на уровне языка такого правила не существует. Теперь с помощью Proxy можно смоделировать приватные свойства. Приватные свойства обладают такими особенностями:
Теперь изучим 13 операций перехвата прокси, упоминавшиеся выше, и увидим, что нам нужно перехватить только 3 из них:
Proxy и Reflect
Объект Proxy «оборачивается» вокруг другого объекта и может перехватывать (и, при желании, самостоятельно обрабатывать) разные действия с ним, например чтение/запись свойств и другие. Далее мы будем называть такие объекты «прокси».
Прокси используются во многих библиотеках и некоторых браузерных фреймворках. В этой главе мы увидим много случаев применения прокси в решении реальных задач.
В качестве начального примера создадим прокси без всяких ловушек:
Чтобы активировать другие его возможности, добавим ловушки.
Что именно мы можем ими перехватить?
Для большинства действий с объектами в спецификации JavaScript есть так называемый «внутренний метод», который на самом низком уровне описывает, как его выполнять. Например, [[Get]] – внутренний метод для чтения свойства, [[Set]] – для записи свойства, и так далее. Эти методы используются только в спецификации, мы не можем обратиться напрямую к ним по имени.
Ловушки как раз перехватывают вызовы этих внутренних методов. Полный список методов, которые можно перехватывать, перечислен в спецификации Proxy, а также в таблице ниже.
JavaScript налагает некоторые условия – инварианты на реализацию внутренних методов и ловушек.
Большинство из них касаются возвращаемых значений:
Есть и другие инварианты, например:
Ловушки могут перехватывать вызовы этих методов, но должны выполнять указанные условия.
Инварианты гарантируют корректное и последовательное поведение конструкций и методов языка. Полный список инвариантов можно найти в спецификации, хотя скорее всего вы не нарушите эти условия, если только не соберётесь делать что-то совсем уж странное.
Теперь давайте посмотрим, как это всё работает, на реальных примерах.
Значение по умолчанию с ловушкой «get»
Чаще всего используются ловушки на чтение/запись свойств.
Он срабатывает при попытке прочитать свойство объекта, с аргументами:
Мы можем использовать Proxy для реализации любой логики возврата значений по умолчанию.
Представим, что у нас есть объект-словарь с фразами на английском и их переводом на испанский:
Чтобы достичь этого, обернём dictionary в прокси, перехватывающий операцию чтения:
Пожалуйста, обратите внимание: прокси перезаписывает переменную:
Прокси должен заменить собой оригинальный объект повсюду. Никто не должен ссылаться на оригинальный объект после того, как он был проксирован. Иначе очень легко запутаться.
Валидация с ловушкой «set»
Допустим, мы хотим сделать массив исключительно для чисел. Если в него добавляется значение иного типа, то это должно приводить к ошибке.
Ловушка set срабатывает, когда происходит запись свойства.
set(target, property, value, receiver) :
Давайте применим её для проверки новых значений:
Таким образом, код остаётся чистым и прозрачным.
Как сказано ранее, нужно соблюдать инварианты.
Для set реализация ловушки должна возвращать true в случае успешной записи свойства.
Перебор при помощи «ownKeys» и «getOwnPropertyDescriptor»
Такие методы различаются в деталях:
…Но все они начинают с этого списка.
Как видно, работает.
Впрочем, если мы попробуем возвратить ключ, которого в объекте на самом деле нет, то Object.keys его не выдаст:
Вот так будет работать:
Ещё раз заметим, что получение дескриптора нужно перехватывать только если свойство отсутствует в самом объекте.
Защищённые свойства с ловушкой «deleteProperty» и другими
Однако технически это всё равно возможно:
Нам будут нужны следующие ловушки:
Вот соответствующий код:
Обратите внимание на важную деталь в ловушке get на строке (*) :
Такое решение обычно работает, но не является идеальным, поскольку метод может передать оригинальный объект куда-то ещё, и возможна путаница: где изначальный объект, а где – проксированный.
К тому же, объект может проксироваться несколько раз (для добавления различных возможностей), и если передавать методу исходный, то могут быть неожиданности.
Так что везде использовать такой прокси не стоит.
Впрочем, приватные свойства имеют свои недостатки. В частности, они не наследуются.
«В диапазоне» с ловушкой «has»
Давайте посмотрим ещё примеры.
Прокси
Введение
Прокси используются программистами для объявления расширенной семантики JavaScript объектов. Стандартная семантика реализована в движке JavaScript, который обычно написан на низкоуровневом языке программирования, например C++. Прокси позволяют программисту определить поведение объекта при помощи JavaScript. Другими словами они являются инструментом метапрограммирования.
Примечание: реализация прокси в SpiderMonkey является прототипом, в котором прокси API и семантика не стабильны. Также, реализация в SpiderMonkey может не соответствовать последней версии спецификации. Она может быть изменена в любой момент и предоставляется исключительно как экспериментальная функция. Не полагайтесь на неё в производственном коде.
Эта страница описывает новый API (называемый «непосредственным проксированием»), который является частью Firefox 18. Для просмотра старого API (Firefox 17 и ниже) посетите страницу описания старого прокси API.
Терминология
Прокси
Обработчик
Все ловушки опциональны. В случае, если ловушка не задана, то стандартным поведением будет перенаправление операции к объекту-цели.
Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
proxy.name (in the context of «getting the value»)
receiver.name (if receiver inherits from a proxy and does not override name )
proxy.name = val (in the context of «setting the value»)
receiver.name = val (if receiver inherits from a proxy and does not override name )
Инварианты
Несмотря на то, что прокси предоставляют много возможностей пользователям, некоторые операции не перехватываются для сохранения постоянства языка:
Примеры
Простой пример
Перенаправляющий прокси
В данном примере мы используем JavaScript объект, к которому наш прокси направляет все запросы:
Проверка
При помощи Proxy вы можете легко проверять передаваемые объекту значения:
Дополнение конструктора
Функция прокси может легко дополнить конструктор новым:
Манипуляция DOM элементами
Иногда возникает необходимость переключить атрибут или имя класса у двух разных элементов:
Изменение значений и дополнительные свойства
Прокси объект products проверяет передаваемые значения и преобразует их в массив в случае необходимости. Объект также поддерживает дополнительное свойство latestBrowser на чтение и запись.
Поиск элемента массива по его свойству
Пример использования всех перехватчиков
Смотрите также
Лицензионные примечания
Некоторое содержимое (текст, примеры) данной страницы было скопировано или адаптировано со страниц вики ECMAScript, имеющей лицензию CC 2.0 BY-NC-SA
Практика применения прокси-объектов в JavaScript
Возможно, вы слышали о том, что в JavaScript ES6 появились новые объекты — так называемые прокси. Тем, кто знает о том, что такое прокси-объекты, и умеет с ними работать, они могут принести немалую пользу. Сегодня мы публикуем перевод материала, который направлен на то, чтобы объяснить всем желающим особенности работы с прокси-объектами JS на множестве примеров.
Также откройте в новой вкладке наш предыдущий пост: JavaScript-прокси: и красиво, и полезно
Что такое прокси?
Прокси, в широком смысле, это некая доверенная сущность, выступающая от имени другой сущности. Прокси — это заменитель реального объекта, у которого есть право выступать от имени и в интересах этого объекта. «Объектом» в данном случае может быть практически всё что угодно. Если же ограничиться рассмотрением прокси в применении к JavaScript, то можно сказать, что это — особые объекты, которые позволяют перехватывать и изменять действия, выполняемые над другими объектами. В частности, речь идёт о вызове функций, об операциях присваивания, о работе со свойствами, о создании новых объектов, и так далее. Эту технологию используют для блокирования прямого доступа к целевому объекту или целевой функции и организации взаимодействия с объектом или функцией через прокси-объект.
Прежде чем мы продолжим разговор о прокси-объектах и перейдём к примерам работы с ними, рассмотрим три важных термина, имеющих к ним непосредственное отношение. Подробнее об этом можно почитать здесь.
Синтаксис
Вот как выглядит объявление простого прокси-объекта, которому передаётся целевой объект и обработчик.
Проверка поддержки прокси-объектов браузером
Начнём с проверки поддержки прокси-объектов JavaScript браузером.
Стандартное поведение объектов
Здесь мы объявим объект, а затем попробуем обратиться к несуществующему свойству этого объекта.
Использование прокси для объекта
Перехватчик get
Перехватчик get выполняется при попытке доступа к свойству объекта с использованием прокси. Метод get принимает параметр target (объект, с которым нужно работать через прокси) и property (свойство, к которому мы пытаемся получить доступ).
▍Синтаксис
▍Пример
В следующем примере мы попытаемся воздействовать на значение с помощью перехватчика get до вывода его на экран.
Перехватчик set
Перехватчик set выполняется при попытке установки свойства объекта с использованием прокси. Метод set принимает параметр target (объект, доступ к которому мы собираемся получить), property (свойство, которое мы собираемся устанавливать), и value (значение свойства, которое мы собираемся установить).
▍Синтаксис
▍Пример
В следующем примере мы добавим к объекту некоторые свойства, назначим им значения, при этом сделаем это до объявления прокси-объекта (в коде он носит имя proxyObj ).
Проанализировав этот пример, можно заметить, что если после объявления proxyObj попытаться задать новое свойство объекта, будет вызван перехватчик и в объекте будет сохранено значение свойства, изменённое им.
Перехватчик has
▍Синтаксис
▍Пример
Перехватчик apply
Перехватчик apply позволяет вызывать прокси с параметрами. Он позволяет переопределять функции. Метод apply принимает параметры target (целевой объект или целевая функция), thisArg (аргумент this для использования при вызове) и argumentsList (список всех аргументов в виде массива).
▍Синтаксис
▍Пример
В следующем примере мы, с помощью прокси, переопределим функцию, которая умножает два числа. Прокси меняет поведение функции, прибавляя 1 к результату умножения.
Перехватчик construct
▍Синтаксис
▍Пример
В следующем примере мы передадим через прокси новое значение, к которому добавлен символ валюты, функции-конструктору.
Перехватчик deleteProperty
▍Синтаксис
target: целевой объект.
property : имя свойства, в операцию удаления которого нужно вмешаться.
▍Пример
Следующий пример демонстрирует вызов нужной нам функции и выполнение определённых действий при попытке удаления свойства объекта.
Варианты использования прокси
Вот несколько областей практического применения прокси-объектов в JavaScript.
Итоги
В одном из наших предыдущих материалов о прокси-объектах в JS, который был опубликован в конце января сего года, мы вынесли на голосование следующий вопрос: «Пользуетесь ли вы прокси-объектами в своих JS-приложениях?». Тогда оказалось, что 13% респондентов ответили «Да», 83% — «Нет», а 4% выбрали вариант «Другое (в комментариях)». Мир JavaScript развивается очень быстро. Вполне возможно, что сейчас изменилось и отношение программистов к прокси-объектам. Поэтому предлагаем всем желающим помочь нам это выяснить и принять участие в сегодняшнем опросе.