浅谈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动态创建div属性和样式示例代码
Oct 09 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
JavaScript的Set数据结构详解
Feb 18 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验证码类代码分享(已封装成类)
2011/07/17 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
初学python数组的处理代码
2011/01/04 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
python excel转换csv代码实例
2019/08/26 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
上海天奕面试题笔试题
2015/04/19 面试题
汽车机修工岗位职责
2014/03/06 职场文书
设计师求职信模板
2014/05/06 职场文书
大学学生会辞职信
2015/05/13 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python