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

一文大白话讲清楚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