Proxy与Reflect

1.每个代理陷阱对应一个命名和参数都相同的Reflect方法
在这里插入图片描述在这里插入图片描述
代码:

	let obj = {
          time: '2019-03-11',
          name: 'net',
          _r:123
      }        

      let monitor = new Proxy(obj,{
          // 拦截对象属性的读取
          get(target,key){
              return target[key].replace('2019','2020');
          },
          // 拦截对象设置属性
          set(target,key,value){
              if (key == 'name') {
                  return target[key] = value;
              } else {
                  return target[key]
              }
          },
          // 拦截对象是否存在某个属性
          has(target,key){
              // 只暴露了name属性
              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.geetOwnPropertySymbols,Object.getOwnPropertyNames
          ownKeys(target){
              return Object.keys(target).filter(item=>item!='time')
          }
      });
      console.log('get操作',monitor.time);   // 2020-03-11
      monitor.time = '2021';
      console.log('set1',monitor.time);      // 2019-03-11
      monitor.name = 'wq';
      console.log('set2',monitor.name);      // wq
      console.log('has','name' in monitor,'time' in monitor);   // true false

      console.log(Object.keys(monitor));     // ["name", "_r"]

      delete monitor.time;
      console.log('看看是否删除',monitor);    // Proxy {time: "2019-03-11", name: "wq", _r: 123}

      delete monitor._r;
      console.log('看看是否删除',monitor);     // Proxy {time: "2019-03-11", name: "wq"}

      let obj2 = {
          time: '2019-12-14',
          name: 'wq',
          _r: '学习',
      }
      console.log('Reflect get',Reflect.get(obj2,'time'));     // 2019-12-14
      Reflect.set(obj,'name','wq')
      console.log('Reflect set',obj);      // {time: "2019-03-11", name: "wq"}

      console.log(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 val = this._validator[key];
                      if (val(value)) {
                          return Reflect.set(target,key,value,proxy);
                      } else {
                          console.error('不能设置!!!')
                      }

                  } 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)
          }
      }

      let person = new Person('lilei',30);
      console.log(person);

      person.name = 'wq';
      console.log(person);
      person.name = 48;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值