一文大白话讲清楚ES6代理Proxy和反射Reflect

1. 你当过老板么

• 老板很忙，很多事自己忙不过来，怎么办，找一个秘书，给秘书授权，以他的名义去做事。
• 那简单了，老板能做的我都能做，这就是代理
• 我做完了，总得汇报给老板，让老板信息同步吧，好嘛，这就是反射
• 回到js，我们有一个对象A，不直接操作对象A,而是找来B,让B成为A的代理，然后去操作B。B操作完了再去同步到A。这就是代理和反射

2.代理Proxy

• 用于定于对象基本操作的自定义行为
• 说白了，就是修改程序的默认行为，想好比在编程语言层面上做修改，属于元编程
• 再简单点理解，就是把操作对象的底层方法进行覆写
• 啥意思，就是假设有一个对象，obj={name:‘tom’},正常情况下我们obj.name就能获取到tom。但是我现在不想获取到tom，我让obj.name干点别的，行不行，行，比如让obj.name返回shift
• 上代码

let obj={name:'tom'
}
// 用proxy代理obj
let proxy=new Proxy(obj,{//proxy.name的返回值get(target,name,reciever){return 'shift'}
})
console.log(obj.name)//tom
console.log(proxy.name)//shift

• 明白了吧，proxy的任务就是代理obj，
• 那都能代理obj的哪些方法呢

2.1 get(target,propKey,receiver)//获取对象的属性

• 上面举了例子了

2.2 set(target,propKey,newValue,receiver)//设置属性的值

let obj={name:'tom'
}
let proxy=new Proxy(obj,{set(target,propKey,newValue,reciever){//如果设置proxy.name,就执行下边这句话，把obj.name改为'hahaha'target[propKey]='hahaha'}
})
proxy.name='new Tom'//这里设置name的新值为newTOm
console.log(proxy.name)//hahaha，但最终打印出来的是hahaha

2.3 has(target,propKey)//代理查询属性操作，propKey in obj的操作

let obj={name:'name'
}
let proxy=new Proxy(obj,{has(target,propKey){if(propKey==='age'){return true}}
})
console.log(age in obj)//false,obj里面没有age属性，所以返回false
console.log(age in proxy)//true，proxy里面也灭有age，但是我们拦截覆写了has方法，让他返回rue

2.4 deleteProperty(target,propKey),代理属性删除操作，delete obj.属性

let obj={name:'name',age:'age',
}
let proxy=new Proxy(obj,{deleteProperty(target,propKey){if(propKey==='name'){Reflect.deleteProperty(target,propKey)//如果删除name属性，就正常删除}else if(propKey==='age'){return false//如果删除age属性，则直接返回false，表示删除失败}}
})
console.log(proxy)//{ name: 'name', age: 'age' }
delete proxy.name
delete proxy.age
console.log(proxy)//{ age: 'age' },age属性并没有删除掉

2.5 ownKeys(target)拦截属性查询操作，Object.keys(),Object.getOwnPropertyNames(),Object.getOwnPropertySymbols()等

let obj={name:'tom',age:12
}
let proxy=new Proxy(obj,{ownKeys(target){return ['d','f','g']}
})
console.log(Object.getOwnPropertyNames(proxy))//[ 'd', 'f', 'g' ],正常应该打印['name','age']

2.6 getOwnPropertyDescriptor 代理Object。getOwnPropertyDescriptor(obj,propKey)

let obj={name:'tom',age:12
}
let proxy=new Proxy(obj,{getOwnPropertyDescriptor(target,propKey){return{ value: 'ProxyTom', writable: true, enumerable: true, configurable: true }}
})
console.log(Object.getOwnPropertyDescriptor(proxy,'name'))//正常应该返回{ value: 'tom', writable: true, enumerable: true, configurable: true }
//实际返回
// {
//     value: 'ProxyTom',
//         writable: true,
//     enumerable: true,
//     configurable: true
// }

2.7 defineProperty(target,propKey,PropDesc),代理Object.defineProperty

let obj={name:'tom',age:12
}
let proxy=new Proxy(obj,{defineProperty(target,propKey,propDesc){return Object.defineProperty(target,propKey,{value:'166cm',writable:true,configurable:true,enumerable:true,})}
})
Object.defineProperty(proxy,'height',{value:'163cm',writable:true,configurable:true,enumerable:true,
})
console.log(proxy)//{ name: 'tom', age: 12, height: '166cm' },正常情况下应该打印163cm，是因为对defineProperty进行了覆写

2.8 preventExtensions(target),代理：拦截 Object.preventExtensions(proxy),禁止对象可扩展

let obj={name:'tom'
}
let proxy=new Proxy(obj,{preventExtesions(target){return false}
})
Object.preventExtensions(proxy)//设置对象不可扩展，这里会报错，阻止禁止扩展的行为

2.9 isExtensible(target),代理Object.isExtensible

let obj={name:'tom'
}
let proxy=new Proxy(obj,{isExtensible(target){return Reflect.isExtensible(target)},})
Object.preventExtensions(proxy)//设置对象不可扩展，这里会报错，阻止禁止扩展的行为
console.log(Object.isExtensible(proxy))//false

2.10 getPrototypeOf(target),代理Object.getPrototypeOf(target)

let obj={name:'tom'
}
let proxy=new Proxy(obj,{getPrototypeOf(target){return {age:12}},})console.log(Object.getPrototypeOf(proxy))//{ age: 12 },正常情况下应该打印{}

2.11 apply(target,object,args),代理Proxy作为函数调用的操作

let fn=function (){return 1
}
console.log(fn())//1
let proxy=new Proxy(fn,{apply(target,object,args){return 4}
})
let g=function (){}
console.log(proxy.call(g))//4

2.11 construct(target,args)，代理new 操作

let fn=function (){this.name='tom'
}
let proxy=new Proxy(fn,{construct(target,args){return {name:'new-tom'}}
})
let p=new proxy()
console.log(p)//{ name: 'new-tom' }//正常打印{ name: 'tom' }

3. 反射Reflect

• 上面我们都是在代理对象proxy上操作，源对象obj并没有得到同步
• Reflect的作用就是把对proxy的操作同步到obj上
• 每个Proxy代理的方法，Reflect都有同名对应的方法取反射
• 上代码

let obj={name:'tom'
}
let proxy=new Proxy(obj,{set(target,propKey,newVale,receiver){Reflect.set(target,propKey,newVale,receiver)//同步映射到obj}
})
proxy.age=12;
console.log(proxy)
console.log(obj)
// { name: 'tom', age: 12 }
// { name: 'tom', age: 12 }

• 其他2.1——2.11原理都是一样的，不做一一演示，大家自行写一下