妙用缓存调用链实现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判断checkbox是否选中的小例子
Dec 02 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
浅谈jquery事件处理
Apr 24 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
学习 Vue.js 遇到的那些坑
Feb 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
解析php中的escape函数
2013/06/29 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
JS实现骰子3D旋转效果
2019/10/24 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python实现kNN算法
2017/12/20 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
Django设置Postgresql的操作
2020/05/14 Python
python如何绘制疫情图
2020/09/16 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
初中语文教学反思
2014/02/02 职场文书
运动会表扬稿
2015/01/16 职场文书
行政答辩状范文
2015/05/21 职场文书
大学学生会竞选稿
2015/11/19 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
在CSS中使用when/else的方法
2022/01/18 HTML / CSS