妙用缓存调用链实现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 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
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实现ODBC数据分页显示一例
2006/10/09 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
详解js的六大数据类型
2016/12/27 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python实现AES加密与解密
2019/03/28 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python退出循环的方法
2020/06/18 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
实习自荐信
2013/10/13 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
土建施工员岗位职责
2014/07/16 职场文书
旷课检讨书范文
2014/10/30 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
MySql开发之自动同步表结构
2021/05/28 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript