JavaScript中使用参数个数实现重载功能


Posted in Javascript onSeptember 01, 2017

利用参数的个数实现重载,马上想到的方法就是

function overload(){ 
    switch(arguments.length){ 
      case 0: 
        console.log("一个朋友都没有"); 
        break; 
      case 1: 
        console.log("有一个朋友"); 
        break; 
      case 2: 
        console.log("有两个朋友"); 
        break; 
      case 3: 
        console.log("有三个朋友"); 
        break; 
      case 4: 
        console.log("有四个朋友"); 
        break; 
      //等等 
    } 
  }

这种方式能实现重载,但是这样的代码比较长,实际开发中情况有时候会很多。所以我们可以用下面的方法。

window.onload=function (){ 
    var cat={ 
      friends:["mimi","pp","gg"] 
    } 
    addMethod(cat,"sayName",function(a,b){ 
      console.log("有两个朋友"); 
    }) 
    addMethod(cat,"sayName",function(){ 
      console.log("一个朋友都没有"); 
    }) 
    addMethod(cat,"sayName",function(a){ 
      console.log("有一个朋友"); 
    }) 
    addMethod(cat,"sayName",function(a,b,c){ 
      console.log("有三个朋友"); 
    }) 
    cat.sayName("xiaoming","nihao"); 
    cat.sayName(); 
    cat.sayName("xiaoming"); 
    cat.sayName("xiaoming","xiaohong"); 
  } 
  //实现重载,利用arguments.length的不同来实现 
  function addMethod(object,name,fn){ 
    var old=object[name]; 
    object[name]=function(){ 
      if(fn.length==arguments.length) 
        return fn.apply(this,arguments); 
      else if(typeof old=='function') 
        return old.apply(this,arguments); 
    } 
  }

这个技巧利用的是闭包,在闭包里作为引用进行存储的不同参数的情况。

实际调用addMethod函数的情况,如下图

JavaScript中使用参数个数实现重载功能

为什么会这样呢?

因为闭包的原因,在addMethod的函数中调用了object[name]字面量函数外部的变量old,这使得垃圾回收机制不会回收old,所以old会一直存在内存中,不会消失,我们就是利用的这个特性实现的继承。

下面执行sayName的时候,我们会沿着上边存储的引用依次查找相应的参数,然后找到对应函数来执行。

这种方法还是存在不足:

1.重载只适用于不同数量的参数,但不区分类型、参数或其他东西。

2.这个方法会有函数调用的开销,因为用到了闭包,会占用一些内存。在高性能应用的情况下不适合。

总结

以上所述是小编给大家介绍的JavaScript中使用参数个数实现重载功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
判断js数据类型的函数实例详解
May 23 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 #Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 #Javascript
JavaScript闭包的简单应用
Sep 01 #Javascript
写给vue新手们的vue渲染页面教程
Sep 01 #Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 #Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
说说如何遍历Python列表的方法示例
2019/02/11 Python
Python发展简史 Python来历
2019/05/14 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
keras得到每层的系数方式
2020/06/15 Python
python interpolate插值实例
2020/07/06 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
职称自我鉴定
2013/10/15 职场文书
积极分子思想汇报
2014/01/04 职场文书