Es6(四)

到此Es6的更新小编已经更新完，喜欢小编的点个关注不迷路。only老k将持续更新博客

存在原因

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

Proxy

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

案例讲解就完事

案例一

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

    let target={
    name:'only老k',
    age:20
  };

  //案例一：
    console.log('案例一')
    let handler = {
        get(target, name) {
            console.log('getting:' + name);
            return target[name]
        }
    };
    let pro=new Proxy(target,handler);
    console.log(pro.name);
    console.log(pro.age);
    //new Proxy相当于创建了一个Proxy实例，target为所要拦截的目标对象，handler也是一个对象
    //里面定义的是对拦截对象所要进行的拦截方法。

案例二

拦截操作对象handler为空，未对拦截对象设定拦截方法，该情况下pro直接指向原对象target，访问pro等同于访问target，所以结果为target中的结果。

   console.log('案例二');
    let handle={
  }
  let pro=new Proxy(target,handle);
  console.log(pro.name);//only老K

案例三

上述实例将pro作为obj的原型对象使用，虽然obj本身没有name这个属性，但是根据原型链，会在pro上读取到name属性，之后会执行相对应的拦截操作。

   console.log('案例三');
  let handle={
    get(target,name){
      console.log('getting:'+name);
      return target[name];
    }
  }
  let pro=new Proxy(target,handle);
  console.log(pro.name);

Proxy常用的拦截方法

案例四

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

  let handle={
    get(target,propKey,receiver){
      if(propKey in target){
        console.log("success");
      }else {
        console.log("error");
      }
      return Reflect.get(target,propKey,receiver);
    }
  }
  let pro=new Proxy(target,handle);
  console.log(pro.name);
  console.log(pro.arg);//没有

案例五

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

    console.log('案例五');
  let handle={
      get(target,propKey,receiver){
        if(propKey in target){
          console.log("success");
        }else {
          console.log("error");
        }
        return Reflect.get(target,propKey,receiver);
      },
    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 sucess');
      }
      return Reflect.set(target,propKey,value,receiver);
    }
  }
  let pro=new Proxy({},handle);
  console.log(pro.age=100);//显示正常
  console.log(pro.age='呵呵');//显示报错的内容

案例六

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

  let handle={
    has(target,proKey){
      console.log('handle has');
      return proKey in target;
    }
  }
  let cunzai={name:'only老k'};
  let pro=new Proxy(cunzai,handle);
  console.log('name' in pro);

Reflect

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

get

  //Reflect的静态方法
    console.log('Reflect的静态方法');
// get
    console.log('get');
  let exam={
    name:'only老K',
    age:20,
    get info(){
      return this.name+this.age;
    }
  }
  console.log(Reflect.get(exam,'name'));
  //当target对象中存在name属性个getter方法，getter方法的this会绑定
  let receiver={
  name:'onlyK',
    age:20
  }
  console.log(exam,'info',receiver);
  //当name为不存在target对象的属性时；返回undefined
  console.log(Reflect.get(exam,'bbb'));
  //当target不是对象时，会报错
  console.log(Reflect.get(1,'name'));//TypeError

set

  //set
    console.log('set');
  let exam={
    name:'only老K',
    age:24,
    set info(value){
    return this.age=value;
    }
  }
  console.log(exam.age);//24
  console.log(Reflect.set(exam,'age',50));//true
  console.log(exam.age);//50
  // value 为空时会将 name 属性清除
  console.log(Reflect.set(exam,'age',));//true
  console.log(exam.age);//undefined

还有很多后面小编这里不全部测试了，有兴趣的可以自己去看

菜鸟教程

传送门

上篇博客

点击进入

下篇博客

小编Es6系列暂时先更新到这里，后续有需要小编会继续更新。
喜欢小编的点波关注不迷路。