20190124问:

怎样明白es6中的Proxy？

试题剖析:对proxy的明白，可能会延伸到vue的双向绑定

Proxy（代办） 定义

能够明白为为目的对象架设一层阻拦，外界对该对象的接见，都必须经由过程这层阻拦

简朴示例:

 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 

从上面的示例中能够看出，Proxy存在一种机制，能够对外界的读写操纵举行改写

Proxy 实例要领

proxy除了代办get,set操纵，还能代办别的的操纵，以下

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

• 阻拦和看管外部对对象的接见
• 下降函数或类的庞杂度
• 在庞杂操纵前对操纵举行校验或对所需资本举行治理

题外思索

怎样用proxy完成双向绑定?

往期

JS逐日一题: 前端的缓存有哪些？都实用什么场景？区分是什么？
JS逐日一题: Call，Apply，Bind的运用与区分，怎样完成一个bind？
JS逐日一题: 说说你对前端模块化的明白
JS逐日一题: web平安进击手腕有哪些？以及怎样提防

关于JS逐日一题

JS逐日一题能够看成是一个语音答题社区
天天应用碎片时候采纳60秒内的语音情势来完成当天的考题
群主在越日0点推送当天的参考答案

• 注 毫不仅限于完成当天使命，更多是查漏补缺，进修群内别的同砚优异的答题思绪

点击到场答题