es6 Reflect 与 Proxy

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

一、Proxy基本用法

其中 new Proxy相当于创建了一个Proxy实例，target为所要拦截的目标对象，handler也是一个对象，里面定义的是对拦截对象所要进行的拦截方法。

 let pro = new Proxy(target,handler);

二、实例一

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  let handler = {
    //这里get方法为读取操作，即用户想要读取pro中的属性时执行的拦截操作。
    get(target,name){
      console.log('getting:'+name)
      return target[name]
    }
  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  console.log(pro.name);
  console.log(pro.age);

三、实例二

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  //拦截操作对象handler为空，未对拦截对象设定拦截方法，
  //该情况下pro直接指向原对象target，访问pro等同于访问target，所以结果为target中的结果。
  let handler = {

  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  console.log(pro.name);
  console.log(pro.age);

四、实例三

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  let handler = {
    //这里get方法为读取操作，即用户想要读取pro中的属性时执行的拦截操作。
    get(target,name){
      console.log('getting:'+name)
      return target[name]
    }
  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  //将pro作为obj的原型对象使用，虽然obj本身没有name这个属性，
  // 但是根据原型链，会在pro上读取到name属性，之后会执行相对应的拦截操作。
  let obj = Object.create(pro);
  console.log(obj.name);
  console.log(obj.age);

五、Proxy常用的拦截方法

1、get(target, propKey, receive)方法，用于拦截某个读取属性的操作,第一个参数为目标对象，第二个参数为属性名称，第三个属性为操作所针对的对象（可选参数）。

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  let handler = {
    //第一个参数为目标对象，第二个参数为属性名称，第三个属性为操作所针对的对象（可选参数）。
    get(target, propKey, receive){
      if(propKey in target){
        console.log("success");
      }else{
        console.log("error")
      }
      //return Object.defineProperty(target, propKey, receive);
      return Reflect.get(target, propKey, receive);
    }
  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  console.log(pro.name)
  console.log(pro.sex)

2、set(target, propKey, value, receiver),用于拦截某个属性的赋值操作，第一个参数为目标对象，第二个参数为属性名，第三个参数为属性值，第四个参数为操作行为所针对的对象（可选参数）。

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  let handler = {
    //第一个参数为目标对象，第二个参数为属性名称，第三个属性为操作所针对的对象（可选参数）。
    get(target, propKey, receive){
      if(propKey in target){
        console.log("get success");
      }else{
        console.log("error")
      }
      //return Object.defineProperty(target, propKey, receive);
      return Reflect.get(target, propKey, receive);
    },
    //第一个参数为目标对象，第二个参数为属性名，第三个参数为属性值，第四个参数为操作行为所针对的对象（可选参数）。
    set(target, propKey, value, receiver){
      if(propKey=='age'){
        if(!Number.isInteger(value)){
          throw new TypeError('The age is not an integer');
        }else{
          console.log("set success");
        }
      }else{
        console.log("set success");
      }
      return Reflect.set(target, propKey, value, receiver);
    }
  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  pro.age=30;
  pro.name='呵呵';
  console.log(pro.age)
  console.log(pro.name)

3、has(target, propKey)用来拦截对象是否具有某个属性值的操作，第一个参数为目标对象，第二个参数为属性名

  //创建的target对象为所要拦截的对象，
  let target = {
    name:"张三",
    age: 24
  }
  //handler对象为拦截对象后执行的操作，
  let handler = {
    //第一个参数为目标对象，第二个参数为属性名
    has(target,proKey){
      console.log('handle has');
      return proKey in target;
    }
  }
  //最后创建一个Proxy实例，
  let pro = new Proxy(target,handler);
  console.log('name' in pro);
  console.log('sex' in pro);

六、Reflect的静态方法

Reflect对象的静态方法和Proxy对象的静态方法一一对应

Reflect.apply(target, thisArg, args)

Reflect.construct(target, args)

Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.defineProperty(target, name, desc)

Reflect.deleteProperty(target, name)

Reflect.has(target, name)

Reflect.ownKeys(target)

Reflect.isExtensible(target)

Reflect.preventExtensions(target)

Reflect.getOwnPropertyDescriptor(target, name)

Reflect.getPrototypeOf(target)

Reflect.setPrototypeOf(target, prototype)