Proxy 有一个原始的数据对象,通过代理出来一个新的对象,用户操作的是这个新的对象

{
  let obj ={ time:'2018-01-01', name:'lx' , _r:123 }
  let monitor = new Proxy( obj , {
    get(target , key){ //读取
     return target[key].replace('2018','2017') //把值的2018改成2017
    }
    set(target , key , value){ //设置
     if( key === 'name'){ return target[key] = value } //只允许修改name
      else{ return target[key] }
    }
    has(target , key){ //拦截key in object
     if(key === 'name'){ return target[key] }
      else{ return false }
    }
    deleteProperty(target,key){ //拦截delete
     if(key.indexOf('_')>-1){ delete target[key] ; return true}
      else{ target[key] }
    }
    ownKeys(target){//拦截Object.keys,Objects.getOwnPropertySymbols,Object.getOwnPropertyNames等
      return Object.keys(target).filter(item =>item!='time')
    }
  })
//用户看到和操作的是monitor
  console.log('get' , monitor.time) //2017-01-01
  monitor.time='2019'
  console.log('set', monitor.time) //2017-01-01
  console.log('has', 'name' in monitor , 'time' in monitor) //true false
  delete monitor.time
  console.log('delete', monitor) //time依然存在于monitor
  console.log('ownkeys', Objects.keys(monitor)); //,保护time不显示time
}

Reflect

{
  let obj ={ time:'2018-01-01', name:'lx' , _r:123 };
  console.log( "get" , Reflect.get(obj,'time') ) //"2018-01-01"
  Reflect.set(obj,'name','lmx') ;
  console.log(obj) //{time: "2018-01-01", name: "lmx", _r: 123}
  console.log("has", Reflect.has(obj,'name') ) /true
}
//尽量不对object操作,而是使用Reflect来操作obj

例子:

obj.hasOwnProperty() 指出一个对象是否具有指定名称的属性

两个叹号主要是处理null/undifined/0/""等值,都能转换成布尔值

{
  function validator(target,validator){
    return new Proxy(target,{
      _validator:validator,
     set(target,key,value,Proxy){
    //判断当前对象是否有key值
      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 personvalidator={
    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 , personvalidator ) //返回的是个Proxy对象
   }
  }
  const person = new Person(‘lx’,30);
  console.log(person)
  person.name = 48 //根据代码throw一个错误
}

ES6的Proxy和Reflect的更多相关文章

  1. es6之proxy和reflect

    一.proxy //Proxy和Reflect //供应商 let obj={ time:"2017-11-21", name:"net", _r:123 } ...

  2. es6之Proxy,Reflect

    Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写. var proxy = new Proxy(ta ...

  3. ES6初识-Proxy和Reflect

    { let obj={ time:'2017-03-11', name:'net', _r:123 };   let monitor=new Proxy(obj,{ // 拦截对象属性的读取 get( ...

  4. 利用ES6中的Proxy和Reflect 实现简单的双向数据绑定

    利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo. 好像vue3也把 obj.defineProperty()  换成了Proxy+Reflect. 话不多说 ...

  5. ES6入门:数据劫持、Proxy、Reflect

    什么是数据劫持 Object数据劫持实现原理 Array数据劫持的实现原理 Proxy.Reflect 一.什么是数据劫持 定义:访问或者修改对象的某个属性时,在访问和修改属性值时,除了执行基本的数据 ...

  6. ES6(Proxy 和 Reflect)

    Proxy 和 Reflect 1.Proxy 和 Reflect 的概念 Proxy 意为 ‘代理’,连接了用户和真实对象之间的一个层 Reflect 意为‘反射’   反射的是Object 2.适 ...

  7. 005-Symbol、Proxy、Reflect

    1.Symbol:http://es6.ruanyifeng.com/#docs/symbol 2.Proxy:http://es6.ruanyifeng.com/#docs/proxy Proxy ...

  8. babel 不能统编译Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise的问题

    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...

  9. ES6学习笔记(12)----Reflect

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Reflect 1.概述:Object对象的内部方法都能在Reflect中找到,同时Reflec ...

随机推荐

  1. 浏览器兼容html头部<meta>标签主要内容详情

    <!DOCTYPE html> <head> <meta http-equiv="X-UA-Compatible" content="IE= ...

  2. mysql group by 过滤字段 只能在SELECT 后面出现,不能写其他字段 报错解决 关键字 sql_mode=only_full_group_by

    1:报错  关键字 sql_mode=only_full_group_bymysql> select uuid,ip,count(*) from dbname_report.t_client_i ...

  3. IDEA手动创建JFinal项目

    http://www.jfinal.com/share/674 https://www.oschina.net/question/265150_110300

  4. 提取C3D视频特征(官方文档&实践)

    C3D Introduction 卷积神经网络(CNN)近年被广泛应用于计算机视觉中,包括分类.检测.分割等任务.这些任务一般都是针对图像进行的,使用的是二维卷积(即卷积核的维度为二维).而基于视频的 ...

  5. ExtJS5搭建MVVM框架

    概述 · ExtJs5能够搭建Js的MVC框架,通过配置路由能够通过左边树形菜单导航到所需的页面,效果如下: 搭建JS框架 新建home.htm页面作为ExtJs加载的主体页面,页面引入ExtJs需要 ...

  6. 解决 for xml path encode 的问题

    select stuff( (select ', <' + name + '>' from sys.databases where database_id > 4 order by ...

  7. Java模拟耗时任务异步执行

    说明:耗时任务开启单独线程处理,任务线程处理完毕通知主线程 1.回调接口定义 public interface ResponseCallBack { public void printMsg(Stri ...

  8. 习题集1b: 额外练习 (可选)

    1.练习:4.样本特点 用来描述样本的数字叫做? □ 参数   (√)□ 统计量 □ 变量 □ 常数 2.练习:5.大一学生体重情况 Freidman 博士在一所大学任教,她记录了所在大学每位大一新生 ...

  9. 使用Redis构建全局并发锁

    谈起Redis的用途,小伙伴们都会说使用它作为缓存,目前很多公司都用Redis作为缓存,但是使用Redis仅仅作为缓存未免太大材小用了.深究Redis的原理后你会发现它有很多用途,在很多场景下能够使用 ...

  10. 前端js总结

    1 . 在controller层中的@ResponseBody注解中返回的要是一个对象而不能用字符串. 2 . 给html页面的按钮添加单击事件 $(#login).click( function l ...