妙用缓存调用链实现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 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 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新手上路(九)
2006/10/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
原生js实现鼠标跟随效果
2017/02/28 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
2017/07/20 jQuery
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
windows下python和pip安装教程
2018/05/25 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
副科级后备干部考察材料
2014/05/15 职场文书
销售经理岗位职责
2015/01/31 职场文书
费用申请报告范文
2015/05/15 职场文书
清明扫墓感想
2015/08/11 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
MySQL派生表联表查询实战过程
2022/03/20 MySQL