ES6知识点整理之Proxy的应用实例详解
本文实例讲述了ES6知识点整理之Proxy的应用。分享给大家供大家参考，具体如下：
Proxy用于修改对象某些操作的默认行为，可以对外界的访问进行过滤和改写，其概念类似于元编程。
Proxy让我们可以对任何对象的绝大部分行为进行监听和干涉，实现更多的自定义程序行为。在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截。
目前【兼容性】存在一定的问题，目前在chrome和ff浏览器中的非严格模式下可用，一些先进的技术即使在目前不能广泛应用，但随着时间的流逝，都将会进入程序员日常的编程中。
注：博客整理时间：2018-03-2416:21:15
初识Proxy
varobj={name:'Joh'};
varproxy=newProxy(obj,{
get(target,key){
return'test1';
},
set(target,key,value){
target[key]=value
}
});
console.log(proxy.name);//test1进行get取值
proxy.name='test2';//进行set设置
console.log(obj.name);//test2
通过Proxy对象进行拦截target对象的属性
完整的使用Proxy进行设置,获取，修改和删除的案例
varobj={name:'Joh',group:'g1',_type:'student'};
varproxy=newProxy(obj,{
get(target,key){
if(key[0]!=='_'){
//returnReflect.get(target,key);//效果等同于下面的return语句
returntarget[key];
};
},
set(target,key,value){
if(key[0]!=='_'){
//Reflect.set(target,key,value);
returntarget[key]=value;
}
},
deleteProperty(target,key){
//业务逻辑
if(key[0]!=='_'){
//Reflect.deleteProperty(target,key);
deletetarget[key];
}
}
});
console.log(proxy.name);//Joh
console.log(obj.name);//Joh
proxy.name='Lily';//在非严格模式下的赋值操作，严格模式将会报错
console.log(obj.name);//Lily
deleteproxy.name;//未能成功删除，因为上面内部有判断
console.log(obj.name);//undefined成功删除
deleteproxy.group;
console.log(obj.group);//undefined成功删除
deleteproxy._type;
console.log(obj._type);//student
proxy.color='red';
console.log(obj.color);//red
其中借助Reflect实现和直接实现的效果等同
通过has方法和in关键字进行拦截的示例：
varobj={name:"Joh",_name:"Lily"};
varproxy=newProxy(obj,{
has(target,key){
if(key[0]==='_'){
returnfalse;
}else{
returnkeyintarget;
}
}
});
console.log('hasnameattr:','name'inproxy);//hasnameattr:true
console.log('has_nameattr:','_name'inproxy);//has_nameattr:false
使用ownKeys方法与for-in遍历过滤符合特定规则属性的示例
varobj={name:"Joh",_name:"Lily",age:10,group:"g1"};
varproxy=newProxy(obj,{
ownKeys(target){
returnReflect.ownKeys(target).filter(key=>key[0]!=='_');
}
});
for(varkinproxy){
console.log(k);//分别输出nameagegroup过滤了_name
}
通过apply方法对函数调用的拦截
functiontest(){
console.log('helloworld');
}
varproxyFun=newProxy(test,{
apply(target,ctx,args){
console.log('proxyapply');
returnReflect.apply(target,ctx,args);
}
});
proxyFun();//分别输出proxyapply和helloworld
//proxyFun.apply();//同样，分别输出proxyapply和helloworld
//proxyFun.call();//同样，分别输出proxyapply和helloworld
通过construct方法对构造函数实例化的拦截
functionUser(){
console.log('thisisacontructor');
}
varClassProxy=newProxy(User,{
construct(target,args){
console.log('proxyconstruct');
returnReflect.construct(target,args);
}
});
newClassProxy();//分别输出proxyconstruct和thisisacontructor
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。