js中的proxy基本理解
基本概念
Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”;
let proxy = new Proxy(target,handle);
Proxy 对象的所有用法,都是上面这种形式,不同的只是handle参数的写法。
其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写
var proxy = new Proxy({},{
get: function(){
return ‘’
}
})
作为构造函数,Proxy接受两个参数:
第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;
第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。
如果handler没有设置任何拦截,那就等同于直接通向原对象。
Proxy的拦截操作列表
get操作
get(target, propKey, receiver):拦截对象属性的读取,比如proxy.foo和proxy[‘foo’]。
get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象,也就是所谓的接收器),其中最后一个参数可选。
get方法可以继承。
let obj = { a: 1 };
Let proxy = new proxy(obj, {
get:function(target, attr){
return target[attr]
}
})
Console.log(proxy.a); // 1
get操作经典示例之模拟链式操作
function stack(){
let funcStack = [];
let proxy = new proxy({},{
get:function(target, attrs){
If(attrs=== ‘get’){
return funcStack .reduce(function(val,fn){
return fn(val)
}, value);
}
funcStack.push(window[attrs]);
return proxy;
}
})
return proxy;
}
let double = n => n * 2;
let pow = n => n * n;
let reverseInt = n => n.toString().split(“”).reverse().join(‘’) | 0;
stack(3).double.pow.reverseInt .get; // 63
set操作
set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为
目标对象
属性名
属性值
Proxy 实例本身
其中最后一个参数可选。
set操作一般用于对于要赋值的数进行过滤,加工或是权限设置
let obj = { a:1, b: 2 };
let proxy = new Proxy(obj, {
get:function(target, attr, recevier){
return target[attr]
},
set:function(target,attr,value){
target[attr] = value
}
})
作者:刘国伟