当前位置:首页 > 日记 > 正文

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

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

本文实例讲述了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 mvar 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程序设计有所帮助。

相关文章

Excel网格线不显示的解决方法是什

Excel网格线不显示的解决方法是什

网格,解决方法,显示,电脑软件,Excel,  正常打开excel都会有网格线存在,用来显示出excel单元格的最小单位,有时误操作会导致网格线消失,应该怎么办。以下是小编为您带来的关于Excel网格线不显示的解决方法,希望对您有所帮助。Excel网格线不显…

vue-cli项目中怎么使用mock数据

vue-cli项目中怎么使用mock数据

数据,项目,电脑软件,vue,cli,在vue项目中, mock数据可以使用 node 的 express模块搭建服务1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件2.在build目录下的 dev-server.js的文件作…

中国古代美女绘画方法和思路解析

中国古代美女绘画方法和思路解析

方法,中国古代,思路,美女,电脑软件,今天小编为大家分享中国古代美女绘画方法和思路,教程很不错,值得大家学习,一起来看看吧!效果图:具体的绘制过程:构思:这些年,从刚开始只是很自然的去画画(很少动脑子),到慢慢意识到其实这并不是一件简单的事儿,而是需…

js轮播插件的封装

js轮播插件的封装

封装,插件,电脑软件,js,本文为大家分享了js图片轮播插件的具体代码,供大家参考,具体内容如下我封装的这个轮播插件只需要获取到图片和按钮就可以啦。css 样式.body{ width: 700px; margin: 100px auto; position: relative; heig…

js 动态生成html 触发事件传参字符

js 动态生成html 触发事件传参字符

字符,动态生成,转义,事件,实例,通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式、事件等属性元素,而这时经常会出现所谓的 “单、双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决。下面就来介绍一下相应的转义字…

Angular2中select用法之设置默认值

Angular2中select用法之设置默认值

事件,设置,默认值,详解,电脑软件,本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:一、设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值…

word怎么设置无法复制粘贴word无法

word怎么设置无法复制粘贴word无法

复制粘贴,设置,方法,步骤,电脑软件,  自己写好的word内容为了保护,我们可以拒绝复制粘贴的哦,那么下面就由小编给大家分享下word设置无法复制粘贴的技巧,希望能帮助到您。word设置无法复制粘贴的步骤步骤一:打开word文档,例如这篇文章段落。wo…

ps怎么合成美女站在车上的效果?

ps怎么合成美女站在车上的效果?

车上,站在,效果,美女,电脑软件,今天我们主要介绍关于ps合成相关的知识,下面是一个简单的合成例子,效果如下图。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、收集所用到的素材2、新建:图像大小设置为2…

js中数组插入、删除元素操作的方法

js中数组插入、删除元素操作的方法

操作,数组,删除元素,方法,电脑软件,实例如下:/* * 删除数组元素:Array.removeArr(index) */ Array.prototype.removeArr = function (index) { if (isNaN(index) || index>= this.length) { return false; } this.splice(index, 1)…

详解bootstrap用dropdown-menu实现

详解bootstrap用dropdown-menu实现

上下文菜单,详解,电脑软件,dropdown,bootstrap,详解bootstrap用dropdown-menu实现上下文菜单写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通…

Vue.js实战之通过监听滚动事件实现

Vue.js实战之通过监听滚动事件实现

动态,实战,事件,锚点,电脑软件,前言前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下:如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚…

Easyui Tree获取当前选择节点的所

Easyui Tree获取当前选择节点的所

节点,父节点,选择,电脑软件,Easyui,只支持四层目录结构,比较笨的一个方法JS代码var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 var parentAll = node.text; var flag = ">>"; …