proxy 代理 元编程两个关键字;用于修改某些操作的默认行为;等同于在语言橙层面做出修改;所以属于一种 元编程;及对编程语言进行编程;
Proxy可以理解为。在目标对象之前架设一成拦截,外界对该对象的访问和操作;都要经过这个拦截;因此提供了一种机制;可以对外界的访问进行过滤和改写。Proxy这个词的愿意是代理;用在这里表示它来代理某些操作;
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});
上面代码对一个空对象架设了一层拦截,重定义了属性的读取(get)和设置(set)行为。这里暂时先不解释具体的语法,只看运行结果。对设置了拦截行为的对象obj,去读写它的属性,就会得到下面的结果。
obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
// 2
上面代码说明,Proxy 实际上重载(overload)了点运算符,即用自己的定义覆盖了语言的原始定义。
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
var proxy=new Proxy(target,handler);
Proxy对象的所有用法。都是上面这种形式;不同的是handler参数的写法;其中,new Proxy()表示生成一个Proxy实例;target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为;
下面是另外拦截行为
var proxy=new Proxy({},{
get:function(target,property){
return 35;
}
});
proxy.time //35;
proxy.name //35;
proxy.title //35;
var proxy=new Proxy({},{
get:function(){
return 35;
}
});
let obj=Object.create(proxy);
obj.time//35;
上面代码中;通过Object.creat(proxy);创建了一个对象obj;proxy是他的原型;obj本身并没有time属性;所以根据原型链,会在proxy对象上读取该属性,导致被拦截;
//如果想要拦截一个null的值或者其他的类型的值;可以这么写;
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`,target, key, receiver);
if(target[key]==null){
target[key]='空'
}
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`,target, key, value, receiver);
return Reflect.set(target, key, value, receiver);
}
});
obj.coun //空
关于proxy的一些实例方法;
- get();
get是拦截属性的读取操作;可以接受三个参数;目标对象 以及属性名称;和proxy实例本身;,其中最后一个参数可选;
get方法的用法;
var person={
name:'张三'
};
var proxy=new Proxy(person,{
get(target,peoperty){
if(property in target){
return target[property];
}else{
throw new PeferenceEffor("Property"+property+"\dees not exist.");
}
}
});
proxy.name //‘张三’
proxy.age //抛出异常;
上面代码中;不存在就抛出异常;如果没有这个拦截函数;就返回undefined;
get方法可以继承;
function createArray(...element){
let handler={
get(target,propKey,receiver){
let index=number(propKey);
if(index<0){
propKey=String(target.length+index);
};
return Peflect.get(target,propkey,receiver)
}
}
}
网友评论