Объекты proxy JavaScript

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

Делаем это с помощью собственного объекта Proxy, представленного в ES2015.

Допустим, у нас есть car объект:

const car = {
  color: 'blue'
}

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

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

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

const car = {
  color: 'blue'
}

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

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

const proxyObject = new Proxy(car, handler)

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

proxyObject.color //'blue'

Это похоже на звонок car.color.

Но когда вы попытаетесь получить доступ к свойству, которого нет car, например car.test, вы вернетесь undefined. Используя прокси-сервер, вы вернете 'Not found' строку, поскольку это то, что мы ему сказали.

proxyObject.test //'Not found'

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

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

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

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

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

  • enumerate
  • getOwnPropertyDescriptor
  • getPrototypeOf
  • has
  • isExtensible
  • ownKeys
  • preventExtensions
  • setPrototypeOf

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

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

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

const car = {
  color: 'blue'
}

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

const proxyObject = new Proxy(car, handler)

Если мы позвоним delete proxyObject.color, мы получим TypeError:

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

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

Комментарии ()

    Написать комментарий