ES6中Proxy与Reflect实现重载(overload)的方法


Posted in Javascript onMarch 30, 2017

本文实例讲述了ES6中Proxy与Reflect实现重载(overload)的方法。分享给大家供大家参考,具体如下:

Proxy与Reflect实现重载(overload)

从语法角度讲JavaScript不支持重载。原因很简单,JS中函数可以传入任意类型、任意个数的参数,通通可以通过在函数内使用this.arguments获得。这样,就无法实现同名函数参数列表不同实现不同功能。当然,在实际使用过程中,可以人为去检测传入实参的个数及类型,来进行不同操作。但是,我认为这不能叫做重载。

ES6带来了Proxy和Reflect,配合使用可以实现重载。Proxy用于修改某些操作的默认行为,相当于对原始想进行的操作进行“包装”;Reflect对象的方法与Proxy对象的方法一一对应,这使得Proxy对象可以方便的调用对应的Reflect方法完成默认行为。我们可以这样使用它们:

function LogMessage( m ){
  this.m = m;
}
var message = new LogMessage( 1 );
var overload = new Proxy(message , {
  get: function(target, key, receiver){
    console.log(`getting ${key}`);
    return Reflect.get(target , key , receiver);
  },
  set: function(target, key, value, receiver){
    console.log(`setting ${key}`);
    return Reflect.set(target, key, value, receiver);
  }
});
overload.m = 2; //setting m
var s = overload.m; //getting m

看到了没,是不是很有意思,新创建的Proxy对象overload可以完成目标对象message的操作,同时,可以通过在默认操作之前自定义一些其他操作。我认为,这更像Java里的重载。

那么Proxy与Reflect有哪些实例方法呢?

1.get()
用于拦截某个属性的读取操作。

2.set()
用于拦截某个属性的赋值操作。

3.has()
可以隐藏某些属性,不被in操作符遍历到。

4.construct()
用于拦截new命令。

5.deleteProperty()
用于拦截delete操作。

6.defineProperty()
用于拦截Object.defineProperty操作。

7.enumerate()
用于拦截for...in循环。

8.getOwnPropertyDescriptor()
用于拦截Object.getOwnPropertyDescriptor操作。

9.isExtensible()
用于拦截Object.isExtensible操作。

10.preventExtensions()
用于拦截Object.preventExtensions操作。

11.setPrototypeOf()
用于拦截Object.setPrototypeOf操作。

上面很多方法不是很常用,如果感兴趣可以去查查相关资料

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
vue树形结构获取键值的方法示例
Jun 21 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
小程序最新获取用户昵称和头像的方法总结
Sep 23 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue分类筛选filter方法简单实例
Mar 30 #Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 #Javascript
canvas绘制一个常用的emoji表情
Mar 30 #Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 #Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 #Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 #Javascript
You might like
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Python去除字符串两端空格的方法
2015/05/21 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python配置文件处理的方法教程
2019/08/29 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Python排序函数的使用方法详解
2020/12/11 Python
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2015年团支部工作总结
2015/04/03 职场文书