时间:2021-07-01 10:21:17 帮助过:13人阅读
试题解析:对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除了代理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() 时。
拦截和监视外部对对象的访问
降低函数或类的复杂度
在复杂操作前对操作进行校验或对所需资源进行管理
以上就是es6中的Proxy的理解(附示例)的详细内容,更多请关注Gxl网其它相关文章!