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

1.什么是方法重载

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

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

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

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

2. js如何实现?

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

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

  1. var seven={
  2. dosomething:function(){
  3. switch(arguments.length){
  4. case 0:
  5. console.log(arguments.length);
  6. //dosomething
  7. break;
  8. case 1:
  9. console.log(arguments.length);
  10. //dosomething
  11. break;
  12. case 2:
  13. //dosomething
  14. console.log(arguments.length);
  15. break;
  16. }
  17. }
  18. }

3.优化

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

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

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

咱们为seven编写一个addMethod方法

  1. var seven = {
  2. addMethod: function (fname, func) {
  3. var old = this[fname];
  4. this[fname] = function () {
  5. if (arguments.length == func.length) {
  6. return func.apply(this,arguments);
  7. }
  8. if (typeof old == 'function') {
  9. return old.apply(this, arguments);
  10. }
  11. }
  12. }
  13. };

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

  1. seven.addMethod('dosomething', function (x) {
  2. console.log(arguments.length);
  3. //dosomething
  4. });
  5. seven.addMethod('dosomething', function (x,y) {
  6. console.log(arguments.length);
  7. //dosomething
  8. });
  9. seven.addMethod('dosomething', function (x,y,z) {
  10. console.log(arguments.length);
  11. //dosomething
  12. });

咱们要增加方法,只需要调用这个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. 【英语】Bingo口语笔记(76) - 不知如何应答的场景对话

  2. MySQL存储过程中的3种循环

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...

  3. Swift语法

    Swift语法 标签(空格分隔): Swift 1.打印输出语句 println("Hello, Swift!") 注意每行代码后面无需添加分号作为结束 2.简单值 let---常 ...

  4. nginx upstream的几种配备方式

     nginx upstream的几种配置方式 nginx 的upstream目前支持4种方式的分配 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ,如果后端服务器down掉,能自动剔 ...

  5. bjfu1287字符串输出的大水题

    不多说 /* * Author : ben */ #include <cstdio> #include <cstdlib> #include <cstring> # ...

  6. Worm

    Description 自从见识了平安夜苹果的涨价后,Lele就在他家门口水平种了一排苹果树,共有N棵. 突然Lele发现在左起第P棵树上(从1开始计数)有一条毛毛虫.为了看到毛毛虫变蝴蝶的过程,Le ...

  7. ASP.NET转换人民币大小金额

    public class DecimalToRMB    {        /// <summary>         /// 转换人民币大小金额         /// </sum ...

  8. (转载)OC学习篇之---Foundation框架中的NSDirctionary类以及NSMutableDirctionary类

    昨天学习了Foundation框架中NSArray类和NSMutableArray类,今天来看一下Foundation框架中的NSDirctionary类,NSMutableDirctionary类, ...

  9. 200 OK (from cache) 与 304 Not Modified

    解释: 200 OK (from cache)  是浏览器没有跟服务器确认,直接用了浏览器缓存: 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存. 触发区别: 2 ...

  10. 通过AopTestUtils对切面对象进行mock

    概述   当对一个切面类进行测试时,由于Spring对切面对象生成了proxy对象,此时对切面对象使用ReflectionTestUtils赋值,操作的是proxy对象,而不是真实对象,会使得赋值出问 ...