理解javascript代理基础和反射

理解javascript代理基础

这里的代理是对于对象的代理，这个代理其实和对象属性的访问器属性差不多，可以类比去理解
一、创建空代理——就是设置代理的第二个参数是一个空的对象字面量

<script>
    let target = {
    
      id:"201902091"
    }
    let handler ={
    }
    let proxy = new Proxy(target,handler);
    console.log(target.id);
    console.log(proxy.id);
    target.id =201902000;
    console.log(target.id);
    console.log(proxy.id);
    proxy.id = 201902001;
    console.log(target.id);
    console.log(proxy.id);
    console.log(target == proxy);  //这样就会区分代理和目标
    console.log(proxy.prototype);  //这说明不可以对代理对象使用instanceof方法
</script>

这里设置空的代理对象，第一个参数是需要代理的对象名，当设置为空代理的时候，则第二个处理对象设置成空对象。
②当更改目标对象的属性的时候，代理对象的属性也会随着改变。
③当我们使用proxy.prototype打印时，出现undefined，则可以知道对于代理对象不能使用instanceof方法。
二、2、定义捕获器 理解捕获器概念：当我获取代理对象中的属性的时候，触发捕获器中的get方法

<script>
    let target = {
    
      foo:"bar",
    }
    handler = {
    
      get(){
    
        return "handler override"
      }
    }
    let proxy = new Proxy(target,handler);                         
    console.log(target.foo);
    console.log(proxy.foo);

    console.log(target['foo']);
    console.log(proxy['foo']);

    console.log(Object.create(target)['foo']);
    console.log(Object.create(proxy)['foo']);
</script>

当通过代理对象来打印属性的时候，就会触发get()方法，从而返回相应的字符串。
三、捕获器API ，get传入三个参数

<script>
 const target = {
    
      foo:"bar",
      name:"dl"
    }
    const handler = {
    
      get(target,property,proxy){
    
        console.log(target);
        console.log(property);
        console.log(proxy);
        return "aaa";
      }
    }
    const proxy = new Proxy(target,handler);
    console.log(proxy.foo);
</script>

这里传入三个参数，第一个参数是target：是被代理的对象，第二个参数是访问的属性，第三个参数是该代理的对象。

四、代理访问对象属性的两种方法

<script>
const target ={
    
      name:"domng",
    }
    const handler = {
    
      get(target,property,proxy){
    
        return target[property];
      }
    }
    const proxy = new Proxy(target,handler);
    console.log(proxy.name);
</script>

<script>
const target = {
    
      foo:"bar"
    }
    const handler = {
    
      get(){
    
        return Reflect.get(...arguments);
      }
    }
    const proxy = new Proxy(target,handler);
    console.log(proxy.foo);
</script>

五、多个代理可以形成拦截网

<script>
const target = {
    
      name:"DX",
    }
    const fristProxy = new Proxy(target,{
    
      get(){
    
        console.log("first Proxy");
        return Reflect.get(...arguments);
      }
    })
    const secondProxy = new Proxy(fristProxy,{
    
      get(){
    
        console.log("second Proxy");
        return Reflect.get(...arguments);
      }
    })
    console.log(secondProxy.name);
</script>

这里设置两个代理，fristProxy代理target的代理，secondProxy是firstProxy的代理，这样当访问secodeProxy就会经过fristProxy和target来进行设置。

六、代理的不足