妙用缓存调用链实现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 相关文章推荐
javascript 建设银行登陆键盘
Jun 10 Javascript
JS 表单验证大全
Nov 23 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jQuery $.each遍历对象、数组用法实例
Apr 16 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 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
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python求pi的方法
2014/10/08 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
支部书记四风对照材料
2014/08/28 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript