(二)16.Proxy和Reflect19-08-13

Proxy和Reflect
Proxy和Reflect的概念
Proxy ：代理
Reflect：反射

• Proxy

{
  //原始对象存储数据
  let obj={
    time:'2017-08-11',
    name:'net2017',
    _r:123
  };

  //创建Proxy代理
  let monitor=new Proxy(obj,{
    //拦截对象属性的读取
    get(target,key) {
      //get是拦截代理所有跟读取相关的属性
      return target [key].replace('2017','2018');//不管拦截什么属性 都把属性中的2017换成2018
    },
    //拦截方法设置属性
    set(target, key,value) {
      if (key==='name'){
        return target[key]=value;
      }else {
        return target[key];
      }
    },
    // 判断当前对象中是否拥有某个属性
    // 拦截key in object操作
    has(target,key){
      if (key==='name'){
        return target[key]
      }else {
        return false;
      }
    },
    //拦截删除
    deleteProperty(target,key){
      //下划线开头的删除
      if (key.indexOf('_')>-1){
        delete target[key];
        return true;
      }else {
        return target[key]
      }
    },
    //拦截Object.keys Object.getOwnPropertySymbols Object.getOwnPropertyNames
    ownKeys(target) {
      return Object.keys(target).filter(item=>item!='time')//过滤掉time标签
    }

  });
    // monitor.time//读取monitor的time属性
    console.log('get',monitor.time,monitor.name);
    monitor.time='2018';
    monitor.name='mukewang';
    console.log('set',monitor.time,monitor);

    console.log('has','name' in monitor,'time' in monitor);

    // delete monitor.time;
    // console.log('delete',monitor);
    // delete monitor._r;
    // console.log('delete',monitor);

  console.log('ownKey',Object.keys(monitor));
}

打印结果：

get 2018-08-11 net2018
set 2018-08-11 Proxy {time: "2017-08-11", name: "mukewang", _r: 123}
has true false
//delete Proxy {time: "2017-08-11", name: "mukewang", _r: 123}
//delete Proxy {time: "2017-08-11", name: "mukewang"}
ownKey (2) ["name", "_r"]

• Reflect

{
  //原始对象存储数据
  let obj={
    time:'2017-08-11',
    name:'net2017',
    _r:123
  };
  //get方法
  console.log('Reflect get',Reflect.get(obj,'time'));
  //set方法
  Reflect.set(obj,'name','mukewang');
  console.log(obj);
  console.log('has',Reflect.has(obj,'name'));
}

打印结果：
Reflect get 2017-08-11
{time: "2017-08-11", name: "mukewang", _r: 123}
has true

Proxy和Reflect的试用场景

{
  function validator(target,validator) {
    return new Proxy(target,{
      _validator:validator,
      set(target, key, value, proxy) {
        if (target.hasOwnProperty(key)){
          let va=this._validator[key];
          if (!!va(value)){
            return Reflect.set(target,key,value,proxy)
          }else {
            throw Error(`不能设置${key}到${value}`)
          }

        }else{
          throw Error(`${key} 不存在`)
        }
      }
    })
  }

  const personValidators={
    name(val){
      return typeof val==='string'
    },
    age(val){
      return typeof val === 'number' && val>18
    }
  }

  class Person{
    constructor(name,age){
      this.name=name;
      this.age=age;
      return validator(this, personValidators)
    }
  }

  const person=new Person('lilei',30);

  console.info(person);

  // person.name=48;  //会报错 因为设置了name必须是字符串
  person.name='Han Mei Mei';
  console.info(person);
}

打印结果：
Proxy {name: "lilei", age: 30}
Proxy {name: "Han Mei Mei", age: 30}