来自于我的博客http://sweets.cf/,转载注明出处

1.什么是方法重载

方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数。

简而言之就是:方法重载就是方法名称重复,加载参数不同。

具体看请左转: 方法重载/百度百科

那么js如何实现这个呢???

2. js如何实现?

首先javascript是没有重载函数/方法这个概念的,但是js提供了一个arguments这个方法参数,通过这个参数的length属性就可以拿到方法参数的长度,o对了,咱们今天实现的也仅仅是按照参数长度`重载`,而不是参数类型~·length ,

那么及下载呢,一旦有了方法参数长度,于是出现了比常见的switch写法:

var seven={
dosomething:function(){
switch(arguments.length){
case 0:
console.log(arguments.length);
//dosomething
break;
case 1:
console.log(arguments.length);
//dosomething
break;
case 2:
//dosomething
console.log(arguments.length);
break;
}
}
}

3.优化

wow如果10个方法就需要10个分支而且很不好维护因为每个方法体都在case下,或者单独提出来写成一个function

然后这些都是不好的不易维护的,逼格不够高的那么咱们应该如何优雅的实现对于不同参数的同一方法名的处理呢?

这就用到这个 apply 这个方法了.

咱们为seven编写一个addMethod方法

var seven = {
addMethod: function (fname, func) {
var old = this[fname];
this[fname] = function () {
if (arguments.length == func.length) {
return func.apply(this,arguments);
}
if (typeof old == 'function') {
return old.apply(this, arguments);
}
}
}
};

修改后的seven如上,然后之前写的switch就可以这样搞了:

seven.addMethod('dosomething', function (x) {
console.log(arguments.length);
//dosomething
});
seven.addMethod('dosomething', function (x,y) {
console.log(arguments.length);
//dosomething
});
seven.addMethod('dosomething', function (x,y,z) {
console.log(arguments.length);
//dosomething
});

咱们要增加方法,只需要调用这个addMethod方法就ok了,是不是觉得简单明了,更加清晰。

那么这段代码的原理呢,其实也很简单,就是缓存旧方法,然后根据参数长度依次apply链式调用,直到找到和当前参数等长的方法~然后进行调用。

funcold 很有可能让初来乍到的童鞋们迷惑,其实不然,这里巧妙的使用了JavaScript语言的特性,这个old每一次保存的都是上一次方法的引用,

而且每次都是全新的,而旧的old又保持着引用,这是什么呢?闭包喽~。

妙用缓存调用链实现JS方法的重载的更多相关文章

  1. 安卓端调用h5界面js方法和ios端调用h5界面js方法

      备注:本人为h5开发人员,不懂安卓和ios,这是开发小伙伴对接联调的主代码. 1.iOS端调用h5界面js方法:     2.安卓端调用h5界面js方法: @Override    protect ...

  2. thymeleaf的初次使用(带参请求以及调用带参js方法)

    之前对于前端框架接触较少,第一次接触thymeleaf,虽说看起来并不复杂但我还是花费了好一会儿才弄懂. 话不多少下面就简单说一下我在项目中的应用. 首先是java代码 controller层 将需要 ...

  3. 客户端调用web中js方法(C调B)跨域问题

    这几天遇到了个棘手问题(c调b),经过排错查出了问题. 一,问题描述如下: 1.客户端需要调用father.html中一个js方法,特殊之处在于 这个father.html中有个iframe嵌套了一个 ...

  4. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  5. 纯静态界面中(html)中通过js调用dll中的方法从数据库中读取数据

    最近接到一个离职员工的任务,一个搭好框架的ERP系统,看了两天,说一下看到的东西,整个项目目录中我没发现一个.aspx后缀的文件,全是静态HTML文件,之后发现他用的jquery简直看的头疼,不过大概 ...

  6. Zipkin存储Sleuth信息实现调用链追踪的几种方法

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/alva_xu/article/detail ...

  7. C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  8. C#后台程序与HTML页面中JS方法互调

    此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...

  9. Opentracing + Uber Jaeger 全链路灰度调用链,Nepxion Discovery

    当网关和服务在实施全链路分布式灰度发布和路由时候,我们需要一款追踪系统来监控网关和服务走的是哪个灰度组,哪个灰度版本,哪个灰度区域,甚至监控从Http Header头部全程传递的灰度规则和路由策略.这 ...

随机推荐

  1. PHP实现站点pv,uv统计(一)

    具体步骤分为数据采集脚本,数据收取服务,数据分析脚本,数据存储服务 采集脚本一般有两种形式,一种是简单的页面插入一个图片进行请求,一种是复杂的动态生成js标签,引入一段js(这时采集服务器会网往客户端 ...

  2. 6、Android中的NFC技术

    Android对NFC技术的支持 Android2.3.1(API Level = 9)开始支持NFC技术,但Android2.x和Android3.x对NFC的支持非常有限.而从Android4.0 ...

  3. 上传Test Result和attachment到ALM

    之前在HP的时候用ALM,还是很好用的功能很强大的一个测试管理工具,当时用C#依照ALM的API实现了一个上传测试结果的程序,现在贴出来: 这个程序的使用方式很自由,使得ALM几乎可以和所有测试工具做 ...

  4. win7 共享的问题,"您可能没有权限使用网络资源"的解决办法

    重点来了,如果以上方法都不行的话,下面这个绝对有效,本人屡试不爽.1 打开受访者的guest权限2 开始--运行--gpedit.msc3 windows设置---安全设置--本地策略--用户权利指派 ...

  5. oracle 查看表的相关信息

    1.查看当前用户的表 SELECT * FROM user_tables; 2.查看指定用户的表 SELECT * FROM all_tables WHERE owner = 'SYS';

  6. 使用xshell使用删除出现乱码

    在使用xshell的时候出现如下错误: 1.打开如下属性设置: 2. 查看终端--键盘设置 4.修改为下图所示: 从而可解决删除乱码问题,在设置完成之后,关闭xshell,重新打开即可.

  7. 凸包稳定性判断:每条边上是否至少有三点 POJ 1228

    //凸包稳定性判断:每条边上是否至少有三点 // POJ 1228 #include <iostream> #include <cstdio> #include <cst ...

  8. 内存溢出(heap corruption detected:)

    今天又遇到了上次出现的bug,然后百度了一下,想起来这是内存溢出的毛病,故记录下来! 出现的问题就是这样: heap corruption detected: after normal block(# ...

  9. [转] 編程風格要素-The Elements of Programming Style 中文英文中英對照

    转自: http://www.loliman3000.com/tech/2fe33ce32906f0302412881.php 下面的程序風格規則提煉自Brian Kernighan和P. J. Pl ...

  10. [转] Web前端优化之 CSS篇

    原文链接: http://lunax.info/archives/3097.html Web 前端优化最佳实践第四部分面向 CSS.目前共计有 6 条实践规则.另请参见 Mozilla 开发者中心的文 ...