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 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
js实现碰撞检测
Jan 29 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
教你php如何实现验证码
2016/01/20 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
JavaScript 基本概念
2015/01/20 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python3安装Pymongo详细步骤
2017/05/26 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python编写通讯录通过数据库存储实现模糊查询功能
2019/07/18 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
化工专业应届生求职信
2013/11/08 职场文书
企业新年寄语
2014/04/04 职场文书
医学求职自荐信
2014/06/21 职场文书
化学教育专业求职信
2014/07/08 职场文书
护理专业自我评价
2015/03/11 职场文书
2015年平安创建工作总结
2015/04/29 职场文书