Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
tainoff
7 лет назад

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

8
0.000 GOLOS
На Golos с November 2017
Комментарии (3)
Сортировать по:
Сначала старые