• ES6-----学习系列十二(Proxy和Reflect)


    一、Proxy(代理)和Reflect(反射)这两个属于高级一点的东西了 

      1、Proxy

    {
      let obj={
        time:'2017-03-11',
        name:'net',
        _r:123
      };
    
      let monitor=new Proxy(obj,{
        // 拦截对象属性的读取 ,这里所说的拦截就属于代理的意思
        get(target,key){
          return target[key].replace('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;
          }
        },
        // 拦截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')//过滤掉属性不是time的
        }
      });
    
      console.log('get',monitor.time);
    
      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));
    
    }

      2、Reflect  

    {
      let obj={
        time:'2017-03-11',
        name:'net',
        _r:123
      };
    
      console.log('Reflect get',Reflect.get(obj,'time'));
      Reflect.set(obj,'name','mukewang');
      console.log(obj);
      console.log('has',Reflect.has(obj,'name'));
    }

    二、具体的使用场景(数据校验)

    {
      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)
        }
      }
    
      const person=new Person('lilei',30);
    
      console.info(person);
    
      person.name='Han mei mei';
    
      console.info(person);
    }

      

  • 相关阅读:
    【剑指Offer】49把字符串转换成整数
    【剑指Offer】48不用加减乘除做加法
    【剑指Offer】47求1+2+3+...+n
    判断两个线段是否相交
    EM算法--原理
    理解KMP算法
    阿里校招笔试的一道逻辑题
    线性拟合之最小二乘方法和最小距离方法
    Oracle Net Manager 服务命名配置以及用PL/SQL 登陆数据库
    正则表达式总结
  • 原文地址:https://www.cnblogs.com/diasa-fly/p/7017201.html
Copyright © 2020-2023  润新知