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 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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学习之简单计算器实现代码
2011/06/09 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
Symfony的安装和配置方法
2016/03/17 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python描述器descriptor详解
2015/02/03 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
学生会离职感言
2014/02/11 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
工地安全质量标语
2014/06/07 职场文书
孝女彩金观后感
2015/06/10 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
python Tkinter模块使用方法详解
2022/04/07 Python