妙用缓存调用链实现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数组去重的方法汇总
Jul 29 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
教你如何在Node.js中使用jQuery
Aug 28 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 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
php设计模式小结
2013/02/15 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python 查看文件的编码格式方法
2017/12/21 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Django后台admin的使用详解
2019/07/08 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
现金会计岗位职责
2013/12/05 职场文书
买房子个人收入证明
2014/01/16 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
八年级数学教学反思
2016/02/17 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Spring Boot实现文件上传下载
2022/08/14 Java/Android