浅谈es6语法 (Proxy和Reflect的对比)

 更新时间:2017年10月24日 08:35:32   作者:abcByme  
下面小编就为大家带来一篇浅谈es6语法 (Proxy和Reflect的对比)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:

{ 

 //原始对象
 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')
 }
 });

 console.log('get',monitor.time); //2018-03-11
 //操作
 monitor.time='2018';
 monitor.name='mukewang';
 console.log('set',monitor.time,monitor);//2018-03-11;{time: "2017-03-11", name: "mukewang", _r: 123}

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

 delete monitor.time;
 console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang", _r: 123}
 //
 delete monitor._r;
 console.log('delete',monitor);//{time: "2017-03-11", name: "mukewang"}

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

}

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

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

以上这篇浅谈es6语法 (Proxy和Reflect的对比)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈Rx响应式编程

    浅谈Rx响应式编程

    在学习Rx编程的过程中,理解Observable这个概念至关重要,常规学习过程中,通常需要进行多次碰壁才能逐渐开悟。这个有点像小时候学骑自行车,必须摔几次才能掌握一样。当然如果有办法能言传,则可以少走一些弯路,尽快领悟Rx的精妙
    2021-06-06
  • JS继承与闭包及JS实现继承的三种方式

    JS继承与闭包及JS实现继承的三种方式

    大家都知道,面向对象的三大特征——封装、继承、多态。下面通过本文给大家介绍JS继承与闭包及JS实现继承的三种方式,感兴趣的朋友一起看看吧
    2017-10-10
  • elementUI Table 表格编辑数据后停留当前位置的示例代码

    elementUI Table 表格编辑数据后停留当前位置的示例代码

    这篇文章主要介绍了elementUI Table 表格编辑数据后停留当前位置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • js禁止浏览器页面后退功能的实例(推荐)

    js禁止浏览器页面后退功能的实例(推荐)

    下面小编就为大家带来一篇js禁止浏览器页面后退功能的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • js继承call()和apply()方法总结

    js继承call()和apply()方法总结

    本文介绍了js继承当中的call和apply方法,从定义到常用实例都做了分析,非常的实用,推荐给小伙伴们。
    2014-12-12
  • js获取元素在浏览器中的绝对位置

    js获取元素在浏览器中的绝对位置

    其原理就是利用HTMLElement.offsetParent属性,需要的朋友可以参考下。
    2010-07-07
  • js实现iframe框架取值的方法(兼容IE,firefox,chrome等)

    js实现iframe框架取值的方法(兼容IE,firefox,chrome等)

    这篇文章主要介绍了js实现iframe框架取值的方法,可兼容IE,firefox,chrome等浏览器.涉及JavaScript针对框架元素取值的相关技巧,需要的朋友可以参考下
    2015-11-11
  • javascript将扁平的数据转为树形结构的高效率算法

    javascript将扁平的数据转为树形结构的高效率算法

    这篇文章主要介绍了javascript将扁平的数据转为树形结构的高效率算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js面向对象之实现淘宝放大镜

    js面向对象之实现淘宝放大镜

    这篇文章主要为大家详细介绍了js面向对象之实现淘宝放大镜,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 基于JS实现网页中的选项卡(两种方法)

    基于JS实现网页中的选项卡(两种方法)

    这篇文章主要介绍了用js语句实现网页中的选项卡(两种方法),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06

最新评论