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 объект.