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 相关文章推荐
javascript定时变换图片实例代码
Mar 17 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
js读取配置文件自写
Feb 11 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
javascript实现点击产生随机图形
Jan 25 Javascript
使用webpack和rollup打包组件库的方法
Feb 25 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
Views rows style模板重写代码
2011/05/16 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Python字典操作简明总结
2015/04/13 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
python中Apriori算法实现讲解
2017/12/10 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Collection和Collections的区别
2016/05/02 面试题
高中生自我鉴定范文
2013/10/30 职场文书
英文简历自荐信范文
2013/12/11 职场文书
《赶海》教学反思
2014/04/20 职场文书
运动会广播稿200字
2014/10/18 职场文书
教师节主题班会方案
2015/08/17 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript