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 相关文章推荐
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
详解用node编写自己的cli工具
May 23 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
js模拟实现烟花特效
Mar 10 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简单系统查询模块代码打包下载
2008/06/07 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
vue-cli之router基本使用方法详解
2017/10/17 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
在求职信中如何凸显个人优势
2013/10/30 职场文书
关于运动会的稿件
2014/02/02 职场文书
2014学年自我鉴定
2014/02/23 职场文书
员工福利申请报告
2015/05/15 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
nginx内存池源码解析
2021/11/20 Servers
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server