Режим прокси в ES6 ----- Прокси

внешний интерфейс Шаблоны проектирования JavaScript API

Что такое прокси-режим

Шаблон прокси (англ. Proxy Pattern) — это шаблон проектирования в программировании.

Так называемый прокси — это класс, который может действовать как интерфейс к чему-то еще. Прокси может взаимодействовать с чем угодно: сетевыми соединениями, большими объектами в памяти, файлами или другими ресурсами, которые дороги или невозможны для репликации.

Хорошо известным примером шаблона прокси является подсчет ссылок на объекты-указатели.

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

Выше приведено общее определение режима прокси в Википедии Конкретным проявлением режима прокси в JavaScript является новый объект в ES6 ---Proxy

Что такое прокси-объект

на MDN дляProxyОбъяснение:

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

Проще говоря:ProxyОбъекты позволяют настроить основные операции всех допустимых объектов в JavaScript. Затем используйте свои пользовательские операции, чтобы переопределить основные операции своих объектов. То есть, когда объект выполняет базовую операцию, он выполняется. Процесс и результат являются вашими собственными, не объект.

😓 Ну, это может быть слишком сложно выразить словами, давайте сразу перейдем к коду.

Во-первых, синтаксис Proxy:

let p = new Proxy(target, handler);

в:

  • target— это объект, который вы хотите проксировать. Это может быть любой допустимый объект в JavaScript, например: (массив, объект, функция и т. д.)

  • handlerпредставляет собой набор методов работы, которые вы хотите настроить.

  • pэто проксированный новый объект, которыйtargetВсе свойства и методы , но его поведение и результаты находятся вhandlerнастроен в .

Тогда давайте посмотрим на этот код:

let obj = {
  a: 1,
  b: 2,
}

const p = new Proxy(obj, {
  get(target, key, value) {
    if (key === 'c') {
      return '我是自定义的一个结果';
    } else {
      return target[key];
    }
  },

  set(target, key, value) {
    if (value === 4) {
      target[key] = '我是自定义的一个结果';
    } else {
      target[key] = value;
    }
  }
})

console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定义的一个结果

obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4

p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定义的一个结果

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

Диапазон, который прокси может проксировать --handler

В приведенном выше коде мы видим, что второй параметр передается при создании прокси-объекта.handler,этоhandlerобъект сделанgetа такжеsetСостоит из двух методов функции. Эти два метода будут использоваться в объектеgetа такжеsetвызывается для выполнения вместо операции над нативным объектом. Так почему же вhandler,определениеgetа такжеsetПосле этих двух имен функций вызывается прокси-объектgetа такжеsetЭто сработало?

ФактическиhandlerЭто объект, недавно разработанный ES6. Его функция заключается в использованииРазличные прокси-операции для пользовательских прокси-объектов.它本身一共有13中方法,每种方法都可以代理一种操作.其13种方法如下:

handler.getPrototypeOf()

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。

handler.setPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。

handler.isExtensible()

// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。

handler.preventExtensions()

// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。

handler.getOwnPropertyDescriptor()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。

handler.defineProperty()

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。

handler.has()

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。

handler.get()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。

handler.set()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。

handler.deleteProperty()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。

handler.ownKeys()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。

handler.apply()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。

handler.construct()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。

ПРОКСИ роль

Для режима проксиProxyРоль в основном отражается в трех аспектах:

1. Перехватывать и контролировать внешний доступ к объектам

2. Уменьшите сложность функций или классов

2. Проверяйте операции или управляйте необходимыми ресурсами перед сложными операциями.

Чтобы узнать о конкретных характеристиках этих трех аспектов, вы можете обратиться к этой статье:Пример анализа сценариев использования ES6 Proxy

Совместимость с прокси

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

Использованная литература:

Мой личный URL: wangyiming.info

Категории