妙用缓存调用链实现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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
基于mysql的bbs设计(二)
2006/10/09 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php的ajax简单实例
2014/02/27 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP生成随机密码类分享
2014/06/25 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
python-str,list,set间的转换实例
2018/06/27 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
浅谈Python中的字符串
2020/06/10 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
C语言笔试题回忆
2015/04/02 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
自我鉴定标准格式
2014/03/19 职场文书
本科毕业生自荐信
2014/06/02 职场文书
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
SQL Server删除表中的重复数据
2022/05/25 SQL Server