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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
AngularJs表单验证实例详解
May 30 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 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
桌面中心(一)创建数据库
2006/10/09 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
php写app用的框架整理
2019/09/29 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Python集合操作方法详解
2020/02/09 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Android面试题及答案
2015/09/04 面试题
2014年学生管理工作总结
2014/12/20 职场文书