妙用缓存调用链实现JS方法的重载


Posted in Javascript onApril 30, 2018

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又保持着引用,这是什么呢?闭包喽~。

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
谈谈vue中mixin的一点理解
Dec 12 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
JS实现的缓冲运动效果示例
Apr 30 #Javascript
Vue波纹按钮组件制作
Apr 30 #Javascript
学习JS中的DOM节点以及操作
Apr 30 #Javascript
WebSocket的通信过程与实现方法详解
Apr 29 #Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
在vscode里使用.vue代码模板的方法
Apr 28 #Javascript
JS实现的透明度渐变动画效果示例
Apr 28 #Javascript
You might like
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
smarty简单入门实例
2014/11/28 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP.vs.JAVA
2016/04/29 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
详解python时间模块中的datetime模块
2016/01/13 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python绘制热力图示例
2019/09/27 Python
Python处理PDF与CDF实例
2020/02/26 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
三年大学自我鉴定
2014/01/16 职场文书
小学校本培训方案
2014/06/06 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
收入证明范本
2015/06/12 职场文书