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总篇--目录
