ES6中Proxy有什么用-创新互联
这篇文章主要为大家展示了“ES6中Proxy有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ES6中Proxy有什么用”这篇文章吧。
创新互联主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务郎溪,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792具体如下:
Proxy 用于修改对象某些操作的默认行为,可以对外界的访问进行过滤和改写,其概念类似于元编程。
Proxy 让我们可以对任何对象的绝大部分行为进行监听和干涉,实现更多的自定义程序行为。在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截。
目前【兼容性】存在一定的问题,目前在chrome和ff浏览器中的非严格模式下可用,一些先进的技术即使在目前不能广泛应用,但随着时间的流逝,都将会进入程序员日常的编程中。
注: 博客整理时间:2018-03-24 16:21:15
初识Proxy
var obj = {name:'Joh'}; var proxy = new Proxy(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进行设置, 获取,修改和删除的案例
var obj = {name:'Joh',group:'g1',_type:'student'}; var proxy = new Proxy(obj, { get (target, key) { if(key[0]!== '_') { // return Reflect.get(target,key); // 效果等同于下面的return语句 return target[key]; }; }, set (target, key, value) { if(key[0]!== '_') { // Reflect.set(target,key,value); return target[key] = value; } }, deleteProperty(target, key) { // 业务逻辑 if(key[0] !== '_') { // Reflect.deleteProperty(target, key); delete target[key]; } } }); console.log(proxy.name); // Joh console.log(obj.name); // Joh proxy.name = 'Lily'; // 在非严格模式下的赋值操作,严格模式将会报错 console.log(obj.name); // Lily delete proxy.name; // 未能成功删除,因为上面内部有判断 console.log(obj.name); // undefined 成功删除 delete proxy.group; console.log(obj.group); // undefined 成功删除 delete proxy._type; console.log(obj._type); // student proxy.color='red'; console.log(obj.color); // red
其中借助Reflect实现和直接实现的效果等同
通过has方法和in关键字进行拦截的示例:
var obj = {name:"Joh",_name:"Lily"}; var proxy = new Proxy(obj, { has(target, key) { if(key[0] === '_'){ return false; } else { return key in target; } } }); console.log('has name attr: ', 'name' in proxy); // has name attr: true console.log('has _name attr: ', '_name' in proxy); // has _name attr: false
使用ownKeys方法与for-in遍历过滤符合特定规则属性的示例
var obj = {name:"Joh",_name:"Lily", age:10, group:"g1"}; var proxy = new Proxy(obj, { ownKeys (target) { return Reflect.ownKeys(target).filter(key => key[0] !== '_'); } }); for(var k in proxy) { console.log(k); // 分别输出 name age group 过滤了 _name }
通过apply方法对函数调用的拦截
function test() { console.log('hello world'); } var proxyFun = new Proxy(test,{ apply(target,ctx,args) { console.log('proxy apply'); return Reflect.apply(target,ctx,args); } }); proxyFun(); // 分别输出 proxy apply 和 hello world // proxyFun.apply(); // 同样,分别输出 proxy apply 和 hello world // proxyFun.call(); // 同样,分别输出 proxy apply 和 hello world
通过construct方法对构造函数实例化的拦截
function User() { console.log('this is a contructor'); } var ClassProxy = new Proxy(User, { construct(target,args) { console.log('proxy construct'); return Reflect.construct(target,args); } }); new ClassProxy(); // 分别输出 proxy construct 和 this is a contructor
以上是“ES6中Proxy有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:ES6中Proxy有什么用-创新互联
本文URL:http://myzitong.com/article/popsp.html