妙用缓存调用链实现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调用webservice中的方法实现思路及代码
Feb 25 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
js里的prototype使用示例
2010/11/19 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python选择排序算法实例总结
2015/07/01 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Django多数据库的实现过程详解
2019/08/01 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
经济担保书范文
2014/04/02 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
入团介绍人意见范文
2015/06/04 职场文书
植物园观后感
2015/06/11 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
你知道Java Spring的两种事务吗
2022/03/16 Java/Android