浅谈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 相关文章推荐
动态样式类封装JS代码
Sep 02 Javascript
js tab效果的实现代码
Dec 26 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
node.js基础知识汇总
Aug 25 Javascript
使用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
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
js 目录列举函数
2008/11/06 Javascript
js中判断控件是否存在
2010/08/25 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
python解析xml模块封装代码
2014/02/07 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
儿童python练习实例
2018/05/27 Python
wxpython绘制音频效果
2019/11/18 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
年度考核自我鉴定
2013/11/09 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
千与千寻观后感
2015/06/04 职场文书
趣味运动会赞词
2015/07/22 职场文书
新兵入伍决心书
2015/09/22 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
JavaScript函数柯里化
2021/11/07 Javascript
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB