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 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 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
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python计算三维矢量幅度的方法
2015/06/15 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python3运算符常见用法分析
2020/02/14 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
探亲邀请信范文
2014/01/30 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
培训后的感想
2015/08/07 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js