JavaScript что такое Proxy?


Я не планирую расписывать все подробности о чудесном встроенном объекте Proxy, про него вы можете прочесть на том же developer.mozilla.org

Начнем, объект Proxy позволяет Вам очень просто "перехватывать" обращения к свойства объекта, модифицировать их и отдавать клиентскому коду, причем как при чтении свойства так и его записи. Например, есть некой объект order и нам его надо вывести в бланк печати, но с одним условием, все строковые значения должны быть переведены в верхний регистр, свойство amount отформатировано как валюта, т.е. вывести не просто Number а отформатировать его именно как денежную сумму, а к свойству quantity добавить "шт."

С объектом Proxy это не составит особого труда! Мы даже не будем менять исходный объект order что очень модно в современном мире JS программирования.

const currencyFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
'USD',
minimumFractionDigits: 2
});
const formatQuantity = value => ${value}шт.;
const formatAmount = value => currencyFormatter.format(value);
// Функция для формирования какого-то объекта с различными свойствами среди которых есть строковые поля и amount с quantity
const order = createOrder();
// Перехватчик-обработчик запросов к свойствам объекта order
const handler = {
get: (targetOrder, propertyName) => {
if (typeof targetOrder[propertyName] === 'string') {
// Если обращение идет к свойству-строке, то перед тем как мы его вернем клиентскому коду, прочитаем значение и переведем его в верхний регистр
return targetOrder[propertyName].toUpperCase();
} else if (targetOrder[propertyName] === 'amount') {
// Если обращение происходит к свойству amount, то мы его форматируем как сумму в деньгах
return formatAmount(targetOrder[propertyName]);
} else if (targetOrder[propertyName] === 'quantity') {
// Если обращение происходит к свойству quantity, то мы его форматируем как строку, к которой добавляем 'шт.'
return formatQuantity(targetOrder[propertyName]);
}

return targetOrder[propertyName];
}

// создаем прокси для печати нашего ордера
const printOrder = new Proxy(order, handler);

// что приведет затем к такому результату
console.log(order.name) // Заказ №1
console.log(printOrder.name) // ЗАКАЗ №1
console.log(order.quantity) // 3
console.log(printOrder.quantity) // 3шт.
console.log(order.amount) // 300
console.log(printOrder.amount) // $300.00

Возможно чтобы понять лучше код вам понадобиться посмотреть такие моменты:

По аналогии с чтением Вы можете модифицировать данные которые надо записать в объект order.

Для тех кто не знает как называются функции для получения данных и их записи: getter'ы и setter'ы соответсвенно.

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


Comments 4