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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
VUE重点问题总结
Mar 19 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
layui的select联动实现代码
Sep 28 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 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/08/26 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP中Array相关函数简介
2016/07/03 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
js继承实现方法详解
2016/12/16 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python递归函数用法详解
2020/10/26 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
银行职员自我鉴定
2014/04/20 职场文书
关于环保的标语
2014/06/13 职场文书
股指期货心得体会
2014/09/13 职场文书
个人作风建设总结
2014/10/23 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android