共计 1659 个字符，预计需要花费 5 分钟才能阅读完成。
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 点推送当天的参考答案
注 绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路
点击加入答题