javascript 代理Proxy&反射reflect

代理即是目标对象的抽象。它可以用作目标对象的替身，但又完全独立于目标对象。目标对象既可以直接被操作，也可以通过代理来操作。但直接操作会绕过代理施予的行为。

proxy 接收两个参数，目标对象 和 处理程序对象
 const target = {
    id:"target"
   }

   const handler = {};

   const proxy = new Proxy(target,handler);

   //id属性会访问同一个值
   console.log(target.id);
   console.log(proxy.id);

   //给目标属性赋值会反应到两个对象上
   //因为两个对象访问的是同一个值
   target.id = "foo";
   console.log(target.id);
   console.log(proxy.id);

   //给代理属性赋值会反应到两个对象上
   //因为这个赋值会转移到目标对象上
   proxy.id = "bar";
   console.log(target.id);
   console.log(proxy.id);
    
  try{
     //Proxy.prototype 是undefined
   //因此不能使用instanceof操作符
   console.log(target instanceof Proxy);
   console.log(proxy instanceof Proxy);
   //Uncaught TypeError: Function has non-object prototype 'undefined' in instanceof check
  }catch(err){
    console.log(err);
  }

定义捕获器

const target = {
    id:"target"
   }

   const handler = {
       get(){
           return "handler ovveride"       
       }   
   };

   const 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"]);

这些方法都会出发get()捕获器

get()捕获器会接收到目标会接收到目标对象、要查询的属性和代理对象三个参数

   const handler = {
    get(trapTarget,property,receiver){
           console.log(trapTarget==target);  // true
           console.log(property);         //foo
           console.log(receiver==proxy);   //true
           console.log(receiver==trapTarget);   //false
           console.log(target==proxy);   //false

       }   
   };

//重建被捕获方法的原始行为
  const target = {
    foo:"bar"
   }

   const handler = {
    get(trapTarget,property,receiver){
         return trapTarget[property];
       } 
   };

   const proxy = new Proxy(target,handler);
   
   console.log(proxy.foo); // bar

const proxy = new Proxy(target,handler);

const target = {
    id:"target"
}
const handler = {
     get(target, key, receiver) {
          console.log("key", key, receiver);
          return Reflect.get(target, key, receiver);
        },
        set(target, key, value) {
          return Reflect.set(target, key, receiver)
        },
        deleteProperty(target, key) {
          return Reflect.deleteProperty(target, key)
        }
}

const handler = {
    get(){
        return Reflect.get(...arguments)    
    }
}
//更简洁的写法
const handler = {
    get(){
        return Reflect.get  
    }
}

//或是
const proxy = new Proxy(target,Relect);

可撤销代理
revoke 方法撤销代理

  const target = {
    foo:"bar"
   }

   const handler = {
    get(){
        return "intercepted";
       }   
   };
   const {proxy,revoke} = Proxy.revocable(target,handler);
   console.log(proxy.foo); //intercepted

   revoke();

   console.log(proxy.foo); //TypeError

实用反射API
某些情况下应该优先使用反射API，这是有一些理由的。
1.反射API与对象API
在使用反射API时，要记住:
(1)反射API并不限于捕获处理程序;
(2)大多数反射API方法在Object类型上有对应的方法。
通常，Object上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作。
以下反射方法都会提供状态标记:
□Reflect.defineProperty()
□Reflect.preventExtensions() OReflect.setPrototypeOf()口Reflect.set()
口Reflect.deleteProperty()
3.用一等函数替代操作符
以下反射方法提供只有通过操作符才能完成的操作。
口Reflect.get():可以替代对象属性访问操作符。
口Reflect.set():可以替代=赋值操作符。
口Reflect.has():可以替代in操作符或with()。
口Reflect.deleteProperty():可以替代delete操作符。
口Reflect.construct():可以替代new操作符。