妙用缓存调用链实现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 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
深入理解vue-router之keep-alive
Aug 31 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
jquery向后台提交数组的代码分析
Feb 20 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
SONY SRF-M100的电路分析
2021/03/02 无线电
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
js实现无缝轮播图
2020/03/09 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
ORACLE十问
2015/04/20 面试题
幼儿园中秋节活动方案2013
2014/01/29 职场文书
世界读书日的活动方案
2014/08/20 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
秋季运动会开幕词
2015/01/28 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js