Рубрики
Без рубрики

Прокси-объекты JavaScript

При работе с объектами мы можем создать прокси-объект, который перехватывает и изменяет поведение существующего объекта. Мы делаем это с помощью собственного прокси-объекта, представленного в ES2015. Предположим, у нас есть объект car: const char = {цвет: ‘синий’} Очень простой пример, который мы можем сделать, – это вернуть строку “Не найдено”, когда мы пытаемся получить доступ к несуществующему свойству. Вы можете определить прокси-сервер, который вызывается всякий раз, когда вы пытаетесь получить доступ к свойству этого объекта.

При работе с объектами мы можем создать прокси-объект , который перехватывает и изменяет поведение существующего объекта.

Мы делаем это с помощью Прокси собственного объекта, представленного в ES2015.

Предположим, у нас есть автомобиль объект:

const car = {
  color: 'blue'
}

Очень простой пример, который мы можем сделать, – это вернуть строку “Не найдено”, когда мы пытаемся получить доступ к несуществующему свойству.

Вы можете определить прокси-сервер, который вызывается всякий раз, когда вы пытаетесь получить доступ к свойству этого объекта.

Вы делаете это, создавая другой объект, у которого есть get() метод, который получает целевой объект и свойство в качестве параметров:

const car = {
  color: 'blue'
}

const handler = {
  get(target, property) {
    return target[property] ?? 'Not found'
  }
}

Теперь мы можем инициализировать ваш прокси-объект, вызвав новый прокси() , передав исходный объект и наш обработчик:

const proxyObject = new Proxy(car, handler)

Теперь попробуйте получить доступ к свойству, содержащемуся в объекте car , но ссылаться на него из прокси-объект :

proxyObject.color //'blue'

Это все равно что позвонить car.color .

Но когда вы пытаетесь получить доступ к свойству, которого не существует в автомобиле , например Но когда вы пытаетесь получить доступ к свойству, которого не существует в автомобиле , например , вы бы вернулись неопределенный

proxyObject.test //'Not found'

Мы не ограничиваемся методом get() в обработчике прокси-сервера. Это был самый простой пример, который мы могли бы написать.

У нас есть другие методы, которые мы можем использовать:

  • применить вызывается, когда мы используем применить() на объекте
  • construct вызывается, когда мы обращаемся к конструктору объекта
  • удалить свойство выполняется, когда мы пытаемся удалить свойство
  • defineProperty вызывается, когда мы определяем новое свойство объекта
  • set выполняется, когда мы пытаемся установить свойство

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

Другие методы (также называемые ловушками ), которые мы можем использовать, это:

  • перечислять
  • getOwnPropertyДескриптор
  • Получить прототип
  • имеет
  • нерастяжимый
  • собственные Ключи
  • Предотвращение растяжений
  • Установить прототип

все соответствует соответствующей функциональности.

Вы можете прочитать больше о каждом из них на MDN .

Давайте приведем еще один пример, используя свойство delete . Мы хотим предотвратить удаление свойств объекта:

const car = {
  color: 'blue'
}

const handler = {
  deleteProperty(target, property) {
    return false
  }
}

const proxyObject = new Proxy(car, handler)

Если мы вызовем удалить прокси-объект.color , мы получим ошибку типа:

TypeError: 'deleteProperty' on proxy: trap returned falsish for property 'color'

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

Оригинал: “https://flaviocopes.com/javascript-proxy-objects/”

Читайте ещё по теме: