本页目录
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”
let d=new Proxy(target,handle);Proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。
其中，
- new Proxy()表示生成一个 Proxy 实例，
- target 参数表示所要拦截的目标对象，
- handler 参数也是一个对象，用来定制拦截行为。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
作为构造函数，Proxy 接受两个参数:
- 第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就是这个对象；
- 第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。
如果 handler 没有设置任何拦截，那就等同于直接通向原对象。
另外 Proxy 实例也可以作为其他对象的原型对象。
Proxy 的拦截操作列表
get 操作get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
get 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象，也就是所谓的接收器），其中最后一个参数可选。
get 方法可以继承。
set 操作
set 方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为
- 目标对象
- 属性名
- 属性值
- Proxy 实例本身
其中最后一个参数可选。
set 操作一般用于对于要赋值的数进行过滤,加工或是权限设置
<script src="https://unpkg.com/vue@next"></script><script> //定义对象数据 let a = { value: 1 }; let b = { value: 2 };
//定义处理器 handleA = { //get是对象的属性值返回的方法 //get语法将对象属性绑定到查询该属性时将被调用的函数。 get(target, prop) {//对象a，value console.log(`${target[prop]}获取A：${prop}的值`) return target[prop] }, //set是属性值修改的方法 //当尝试设置属性时，set语法将对象属性绑定到要调用的函数。 set(target, key, value) {//对象a，value， 设置的值 console.log(`设置A：${key}的值为${value}`) } } handleB = { get(target, prop) { console.log(`获取B：${prop}的值`) return target[prop] }, set(target, key, value) { console.log(`设置B：${key}的值为${value}`) } }
let pa = new Proxy(a, handleA) let pb = new Proxy(b, handleB) let sum = pa.value + pb.value;//第一次执行 console.log("第一次打印，sum的值是：", sum)
pa.value = 3; console.log(`简简单单的测试：`, a.value) pb.value = 4; console.log("第二次打印，sum的值是：", sum)
//打印对象 console.log(JSON.stringify(a))</script>实例
原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。
<script src="https://unpkg.com/vue@next"></script><script> //定义对象数据 let a = { value: 1 }; let b = { value: 2 };
//定义处理器 handleA = { //get是对象的属性值返回的方法 //get语法将对象属性绑定到查询该属性时将被调用的函数。 get(target, prop) {//对象a，value console.log(`${target[prop]}获取A：${prop}的值`) return target[prop] }, //set是属性值修改的方法 //当尝试设置属性时，set语法将对象属性绑定到要调用的函数。 set(target, key, value) {//对象a，value， 设置的值 console.log(`设置A：${key}的值为${value}`) } } handleB = { get(target, prop) { console.log(`获取B：${prop}的值`) return target[prop] }, set(target, key, value) { console.log(`设置B：${key}的值为${value}`) } }
let pa = new Proxy(a, handleA) let pb = new Proxy(b, handleB) let sum = pa.value + pb.value;//第一次执行 console.log("第一次打印，sum的值是：", sum)
pa.value = 3; console.log(`简简单单的测试：`, a.value) pb.value = 4; console.log("第二次打印，sum的值是：", sum)
//打印对象 console.log(JSON.stringify(a))</script>可以打开浏览器控制台，观察打印的数值