ES6中新增的Proxy怎么用？

Proxy 代理。

1 什么是代理？

可通过new Proxy(obj,{})创建一个obj对象的代理对象，代码如下：

let obj = {
  name:'zhangsan'
}
let objProxy = new Proxy(obj,{});
console.log(objProxy);//{name: "zhangsan"}
console.log(objProxy.name);//zhangsan
objProxy.name='lisi';
console.log(objProxy.name);//lisi
console.log(obj.name);//lisi

由以上代码可知，代理对象几乎是源对象的完整映射--访问代理对象的属性相当于访问源对象的属性，设置代理对象的属性相当于设置源对象的属性。
Proxy构造函数的第二个参数为具体的代理项配置，配置如下

2 代理项配置

get代理--拦截所有对源对象属性的访问动作

let obj = {
  name:'zhangsan'
}
let objProxy = new Proxy(obj,{
    get(target,key){
        console.log(target,key);
        //{name:'zhangsan'}  name
        return `我是通过代理对象拿到的源对象的值:${target[key]}`;
    }
});
console.log(objProxy.name);
//我是通过代理对象拿到的源对象的值:zhangsan

get函数的第一个参数target为源对象，第二个参数key为访问的源对象的对应属性的key

set代理--拦截所有对源对象属性的设置动作

let obj = {
  name:'zhangsan'
}
let objProxy = new Proxy(obj,{
    set(target,key,value){
        if(key!=='name'){//不允许设置name属性
            target[key] = value;
        }
    }
});
objProxy.name = 'lisi';
objProxy.age = 18;
console.log(objProxy);//{name: "zhangsan", age: 18}
console.log(obj);//{name: "zhangsan", age: 18}

set函数的target参数为源对象，key参数为要设置的源对象属性的key，value为设置值。
由以上代码可见，当我们在set代理中不允许设置name属性后，name属性便变的不可设置，而age属性则可设置

in操作符代理--拦截通过key in obj判断属性是否属于对象的操作

let obj = {
  name:'zhangsan',
  password:'123456'
}
let objProxy = new Proxy(obj,{
    has(target,key){
        if(key==='password'){
            return false;
        }
    }
});
console.log('password' in objProxy);//false
console.log('password' in obj);//true

由以上代码可知，若通过代理对象objProxy来判断是否存在'password'属性，返回值为false,而直接通过源对象obj进行判断，返回结果为true,所以只是实现了‘假装’没有该属性的效果。

delete操作符代理--拦截通过delete操作符删除对象属性的动作

let obj = {
  name:'zhangsan',
  password:'123456'
}
let objProxy = new Proxy(obj,{
    deleteProperty(target,key){
        if(key==='password'){
            return target[key];
        }else{
            delete target[key];
        }
    }
});
delete objProxy.password;
console.log(objProxy);
//{name: "zhangsan", password: "123456"}
delete obj.password;
console.log(obj);//{name: "zhangsan"}

由以上代码可知，我们设置了delete代理，不允许用户删除password属性,当用户通过代理对象删除源对象的password属性时无法完成删除操作，但当用户直接删除源对象的password属性时，是能删除的。

键值访问拦截--通过Object.keys ,Object.getOwnPropertyNames，Object.getOwnPorpertySymbols等访问对象的键值得动作

let objs = {
  name:'zhangsan',
  password:'123456'
}
let objProxy = new Proxy(objs,{
    ownKeys(target){
        return Object.keys(target).filter(function(item){
            if(item!=='password'){
                return true;
            }
        })
    }
});
console.log(Object.keys(objProxy));//['name']

如此，用户通过代理对象objProxy访问源对象时password属性则会消失在结果集中。
Proxy实用小栗子
 ES6总篇--目录