Proxy in es6 verstehen (mit Beispielen)

Der Inhalt dieses Artikels befasst sich mit dem Verständnis von Proxy in es6 (mit Beispielen). Freunde in Not können sich darauf beziehen.

Testfragenanalyse: Das Verständnis von Proxy kann sich auf die bidirektionale Bindung von Vue erstrecken

Proxy (Proxy)-Definition

kann verstanden werden as Das Zielobjekt verfügt über eine Abfangschicht, und der externe Zugriff auf das Objekt muss über diese Abfangschicht erfolgen

Einfaches Beispiel:

 const obj = new Proxy({}, {
     get: (target, key, receiver) => {
         return 'JS'
         console.log(`get ${key}`)
     },
     set: (target, key, value, receiver) => {
         console.log(`set ${key}`)
     },
 })
 
 obj.name = 'JS 每日一题' 
 // set name
 // JS 每日一题
 
 obj.name 
 // 这里进入get的回调函数，所有直接返回 JS

Wie aus dem obigen Beispiel ersichtlich ist, gibt es eine Ein Mechanismus für Proxy, mit dem Sie externe Lese- und Schreibvorgänge neu schreiben können

Proxy-Instanzmethode

Zusätzlich zum Proxy von Get- und Set-Vorgängen kann der Proxy auch andere Vorgänge wie folgt vertreten

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() 时。

Warum? Proxy verwenden

• um externen Zugriff auf Objekte abzufangen und zu überwachen

• Reduzieren Sie die Komplexität von Funktionen oder Klassen

• Überprüfen Sie Vorgänge oder verwalten Sie erforderliche Ressourcen vor komplexen Vorgängen

Das obige ist der detaillierte Inhalt vonProxy in es6 verstehen (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!