浅谈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 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
JavaScript中的Proxy对象
Nov 27 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
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
Access数据库导入Mysql的方法之一
2006/10/09 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python实现随机漫步算法
2018/08/27 Python
python把1变成01的步骤总结
2019/02/27 Python
python 字符串追加实例
2019/07/20 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
如何将Pycharm中调整字体大小的方式设置为"ctrl+鼠标滚轮上下滑"
2020/11/17 Python
毕业生精彩的自我评价分享
2013/10/06 职场文书
读书小明星事迹材料
2014/05/03 职场文书
工作所在部门证明
2014/09/21 职场文书
服务员岗位职责范本
2015/04/09 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL