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>
实例
可以打开浏览器控制台,观察打印的数值