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


Posted in Javascript onOctober 24, 2017

如下所示:

{ 

 //原始对象
 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的对比)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
vue项目支付功能代码详解
Feb 18 Vue.js
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
通俗易懂地解释JS中的闭包
Oct 23 #Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
浅谈Koa服务限流方法实践
Oct 23 #Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 #Javascript
angularjs实现猜大小功能
Oct 23 #Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 #Javascript
You might like
我的论坛源代码(六)
2006/10/09 PHP
php 上传功能实例代码
2010/04/13 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
JavaScript延迟加载
2021/03/09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
python进行两个表格对比的方法
2018/06/27 Python
python读取几个G的csv文件方法
2019/01/07 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
django的csrf实现过程详解
2019/07/26 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
自荐信包含哪些内容
2013/10/30 职场文书
学生自我鉴定模板
2013/12/30 职场文书
期中考试后的反思
2014/02/08 职场文书
创先争优活动方案
2014/02/12 职场文书
无毒社区工作方案
2014/05/23 职场文书
五五普法心得体会
2014/09/04 职场文书
实验心得体会
2014/09/05 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年教研员工作总结
2014/12/23 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python