Прокси - это новая функция, о которой часто забывают из-за многочисленных изменений в ES6. Мое исследование прокси началось в MDN, где вы найдете следующий текст с их описанием:

Объект Proxy используется для определения настраиваемого поведения для основных операций (например, поиска свойств, присвоения, перечисления, вызова функций и т. Д.).

Какие ??

Если это описание не помогло вам (как и я вначале) понять, что такое прокси, не волнуйтесь! Идея на самом деле довольно проста. Представьте себе следующий сценарий:

У вас есть простой объект с двумя свойствами, который передается через множество различных функций в вашем приложении. Через несколько дней вы исправляете ошибку и обнаруживаете, что случайно получили доступ к несуществующему свойству объекта. Очень частая ошибка! Но что, если бы существовал способ немедленно отловить такую ​​ошибку? Здесь вам могут помочь прокси!

let user = {
  name: 'David',
  profession: 'Front-End Engineer'
};
console.log(user.name);         // output: David
console.log(user.profession);   // output: Front-End Engineer
console.log(user.profesion);    // output: undefined

const userProxy = new Proxy(user, {
  get: function(obj, property) {
    if (!(property in obj)) {
      // throw error if we cannot find the property on the target
      throw new ReferenceError('Unkown property: ' + property);
    }
    return obj[property];   // return property of the object
  }
});
console.log(userProxy.name);        // output: David
console.log(userProxy.profession);  // output: Front-End Engineer
console.log(userProxy.profesion);   // output: Uncaught        
                                       ReferenceError: Unkown 
                                       property: profesion

Как видите, мы можем передать наш простой объект user вместе с другим объектом, называемым обработчиком, в наш прокси. Обработчик может содержать несколько ловушек. Ловушки - это методы, обеспечивающие доступ к свойствам, которые можно использовать для добавления в них дополнительной логики.

В этом примере я использовал ловушку get, которая будет вызываться каждый раз, когда вы обращаетесь к свойству объекта Proxy. Затем в ловушке я просто проверяю, существует ли свойство для объекта, и выдаю ошибку, если нет - вот и все!

Погрузитесь глубже

Но get - не единственная ловушка, которую могут использовать ваши обработчики.
Давайте посмотрим на несколько ловушек, которые, на мой взгляд, наиболее полезны:

  • get - Ловушка для получения значений свойств
  • set - Ловушка для установки значений свойств
  • deleteProperty - Ловушка для оператора удаления

Их еще больше для множества различных сценариев использования, так что не забудьте найти их здесь!

Давайте посмотрим на другой пример, на этот раз я воспользуюсь ловушкой set, чтобы сделать свойства объекта безопасными по типу!

const user = {
  id: 10,
  name: 'David'
};
const typeSafeUser = new Proxy(user, {
  set: function(obj, property, newValue) {
    if (property === 'name' && typeof newValue !== 'string') {
      throw new TypeError('Type of property name must be string! 
                           Passed a ' + typeof newValue);
    }
  }
})
typeSafeUser.name = 'Max';      // typeSafeUser.name = Max
typeSafeUser.name = 12;         // TypeError: Type of property name 
                                   must be string! Passed a number

Как видите, использовать прокси-серверы на самом деле очень просто, и они позволяют использовать функции, о которых мы мечтали годами! Если вы хотите получить еще больше примеров, вы можете найти их здесь и здесь.

Некоторые библиотеки уже начали использовать прокси для предоставления отличных API для решения распространенных проблем, например Immer использует прокси для создания реальных неизменяемых объектов, позволяя вам изменять неизменяемые объекты как простые простые объекты.

Наш друг IE11…

Возможно, прочитав это, вы готовы опробовать прокси и создать с его помощью потрясающие вещи, но прежде чем начать, вам нужно задать себе один вопрос:

«Обязательно ли мне поддерживать IE11?»

Если вы должны ответить на этот вопрос «Да», то у меня для вас плохие новости ...

Для вас не будет сюрпризом, что IE11 не поддерживает прокси ES6. Но на этот раз наш герой и спаситель по имени Вавилон не может нам помочь, поскольку для работы прокси требуется функциональность на уровне движка, которую нельзя полифиллировать.

Заключение

Возможности, в которых вам помогут прокси, безграничны. Если вы можете отказаться от поддержки IE11 в своем приложении, вам обязательно нужно подумать о вариантах использования, в которых вы можете использовать прокси!