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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
js实现五星评价功能
Mar 08 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
vue实现购物车小案例
Sep 27 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 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中文验证码实现方法
2015/06/18 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
3分钟学会一个Python小技巧
2018/11/23 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
小车司机岗位职责
2013/11/25 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
国税会议欢迎词
2014/01/16 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫