011-Proxy和Reflect(代理和映射)

/**
 *
 * Proxy和Reflect(代理和映射)
 *      代理: 顾名思义,可以理解为现实生活中的代理商
 *
 */
/* Proxy代理 **********************************************************************/
{
  let obj={
    time:'2017-03-11',
    name:'net',
    _r:123
  };

    /**
     * @params {obj} 要代理的对象
     * @type {Proxy} 真正要代理的东西(方法)
     */
  let monitor=new Proxy(obj,{
    // 拦截对象属性的读取
    get(target,key){
        //不管你读取什么属性,都将这个属性对应值得2017替换成2018
        return target[key].replace('2017','2018');
    },
    // 拦截对象设置属性
    set(target,key,value){
      if(key==='name'){   //只允许修改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;
      }
    },
    // 拦截delete
    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')
    }
  });

  console.log('get',monitor.time); //2018-03-11

  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('ownKeys',Object.keys(monitor));

}


/* Reflect映射 **********************************************************************/
{
  let obj={
    time:'2017-03-11',
    name:'net',
    _r:123
  };

  console.log('Reflect get',Reflect.get(obj,'time'));//2017-03-11
  Reflect.set(obj,'name','mukewang');
  console.log(obj);
  console.log('has',Reflect.has(obj,'name')); //true
}


/* 实践 *******************************************************************************/
{
  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
    },
    mobile(val){
      
    }
  }

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

    /**
     * 对Person实例以后,得到是世对Person代理的Person对象
     * @type {Person}
     */
  const person=new Person('lilei',30);

  console.info(person);

  person.name='Han mei mei';

  console.info(person);
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值