ES6知识点整理之Proxy的应用实例详解

本文实例讲述了ES6知识点整理之Proxy的应用。分享给大家供大家参考，具体如下：

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); // Johconsole.log(obj.name); // Johproxy.name = 'Lily'; // 在非严格模式下的赋值操作，严格模式将会报错console.log(obj.name); // Lilydelete proxy.name; // 未能成功删除，因为上面内部有判断console.log(obj.name); // undefined 成功删除delete proxy.group;console.log(obj.group); // undefined 成功删除delete proxy._type;console.log(obj._type); // studentproxy.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: trueconsole.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}