Многие из вас, вероятно, работали и пользуются многими функциями ES6, но я недавно столкнулся с прокси, и они кажутся довольно крутыми.
Из МДН:
The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).
Итак, у вас есть это. Вот и все! Статья закончена, и я надеюсь, что вы будете следить за мной на следующей неделе!
Просто шучу.
Как упоминалось в MDN, прокси определяют поведение при доступе к целевому объекту. Мне нравится думать об этом как о обертке для целевого объекта. Через секунду я расскажу подробнее, но сначала давайте рассмотрим терминологию, связанную с прокси.
Цель: объект, который прокси будет виртуализировать. Это может быть объект, массивы или даже другие прокси.
Handler: объект, реализующий поведение прокси с помощью ловушек.
Traps: функции, определенные в объекте-обработчике, которые обеспечивают доступ к цели при вызове определенных свойств или методов.
Основной синтаксис для создания прокси:
const myProxy = new Proxy(target, handler);
Прежде чем мы перейдем к тому, что на самом деле делают прокси, давайте для сравнения кратко пробежимся по обычному доступу к объектам.
Обычно вы бы обращались к объектам следующим образом:
const person = {
name: 'laura',
faveFood: 'burritos',
faveColor: 'red',
}
console.log(person.name); // laura
console.log(person.faveFood); // burritos
console.log(person.faveMovie); // undefined
Так что в значительной степени то, что мы ожидали, не так ли? Первые две попытки доступа к объекту person привели к возвращению значений. Третья попытка не определена, так как для объекта человека не существует faveMovie.
Теперь давайте сделаем то же самое, только с прокси!
const handler = {
get: function (target, name) {
return name in target ? target[name] : 'Does not
exist';
}
};
const person = {
name: 'laura',
faveFood: 'burritos',
faveColor: 'red',
}
let p = new Proxy(person, handler);
console.log(person.name); // laura
console.log(person.faveFood); // burritos
console.log(person.faveMovie); // 'Does not exist'
Теперь мы разговариваем. Мы определили наш обработчик, который использует ловушку GET. Обработчик передает цель и запрошенный ключ в ловушку. Затем создается наш объект person и, наконец, создается экземпляр нашего прокси.
Хорошо, итак. Первые два файла console.log возвращают ожидаемые значения. Но смотри! Взгляните на последний вариант: Не существует.
Мы только что написали собственный ответ на случай отсутствия ключа в объекте с использованием прокси-сервера с ловушкой GET. Подумайте о возможностях. Мир это твоя устрица.
Кроме того, просто на заметку — прокси сами по себе ничего не делают. Если вы не установите никаких ловушек, ваш прокси перенаправит операцию целевому объекту. Все ловушки необязательны.
GET и SET, вероятно, были бы наиболее полезными, но есть гораздо больше методов, которые вы можете использовать. Зайдите на MDN и проверьте некоторые из них сами.
