浅谈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的Ajax时无响应数据的解决方法
May 25 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
基于JavaScript 实现拖放功能
Sep 12 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 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/12/06 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python实现字符串和日期相互转换的方法
2015/05/13 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python3标准库总结
2019/02/19 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
《蒲公英》教学反思
2014/02/28 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
护士个人自我鉴定
2014/03/24 职场文书
《长征》教学反思
2014/04/27 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL
Python之matplotlib绘制折线图
2022/04/13 Python