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 相关文章推荐
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
Sep 30 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Openlayers绘制地图标注
Sep 28 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/15 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
浅谈node的事件机制
2017/10/09 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
Python生成器(Generator)详解
2015/04/13 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python3中的json模块使用详解
2018/05/05 Python
python版本单链表实现代码
2018/09/28 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
签约仪式主持词
2014/03/19 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
家装业务员岗位职责
2015/04/03 职场文书
面试通知单大全
2015/04/20 职场文书
校运会广播稿
2015/08/19 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
python中如何对多变量连续赋值
2021/06/03 Python