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 相关文章推荐
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
命令行批量截图Node脚本示例代码
Jan 25 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 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 高手之路(三)
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python 高效编程技巧分享
2020/09/10 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
写给女朋友的检讨书
2014/01/28 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
经济管理自荐书
2014/06/09 职场文书
2014年质检员工作总结
2014/11/18 职场文书
拾金不昧感谢信
2015/01/21 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
asyncio异步编程之Task对象详解
2022/03/13 Python
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript