/*十有三博客*/
  • 首页
  • 关于本站
  • 网站地图
  • RSS订阅

javascript 实现函数/方法重载效果

2014-09-29 十有三 0 浏览:2320 Web前端 Javascript

本文介绍了在javascript中如何实现函数/方法的重载效果,主要是利用了JS函数的arguments对象来访问函数的所有参数,根据判断参数数量来进行不同的功能实现,从而模拟出函数重载的效果。

为什么要实现JS的函数重载?

在C#和JAVA等编程语言中函数重载是指在一个类中可以定义多个方法名相同但是方法参数和顺序不同的方法,以此来实现不同的功能和操作,这就是重载。JS中模拟重载也是一样的意思。

但是js本身没有重载,因为在JS中如果定义了多个相同的函数名称,那么最终只有最后一个定义的函数属于有效的函数,其他之前定义的函数都无效定义。造成此问题是由于javascript属于弱类型语言。比如下面的示例代码:

<script type="text/javascript">
    function showSum(num)
    {
        alert(num + 100);            
    }
    function showSum() {
        alert(500);
    }
    function showSum(num) {
        alert(num + 200);
    }
    showSum(100);
</script>

我们传入了参数100,最终计算结果和网页弹出框显示的是300。因此我们如果想要在JS中用上重载的效果,就必须自己模拟和实现出来。

JS如何实现函数/方法重载?

这里直接上代码:

<script type="text/javascript">
    function showSum()
    {
        //使用arguments对象模拟出重载效果
        if (arguments.length == 1)
        {            
            alert(arguments[0] + 1);
        }
        else if (arguments.length == 2)
        {
            alert(arguments[0] + arguments[1]);
        }
        else if (arguments.length == 3)
        {
            alert(arguments[0] + arguments[1] + arguments[2]);
        }
        else {
            alert('请传入参数!');
        }        
    }
    //显示101
    showSum(100);
    //显示200
    showSum(100, 100);
    //显示300
    showSum(100, 100,100);
</script>

在现实合计的方法showSum中,我们分别模拟重载3种计算方式,如果传入一个数字就加一并显示,传入两个和三个就将这些数值相加取和值并显示出来。

之所以可以使用arguments对象来实现重载,是因为js函数的参数并不是和其他语言那样必须固定声明,而是在函数内部以一个数组来表示传入的参数。也就是无论你传入多少的参数,什么类型的参数,最终所有参数在JS函数里面都是以一个arguments对象(参数数组)来表示的。所以在上面的代码中我们根据arguments对象的参数长度来判断最终要实现哪种计算方式,实现的效果和重载的效果是类似的。

而平时我们在JS中声明的函数显示命名,也是可以调用arguments对象来获取参数值,比如下面两个参数获取的值都是一样的:

<script type="text/javascript">
    function show(message)
    {
        //这里传入的message参数值和arguments[0]参数值是一样的
        alert(message);
        alert(arguments[0]);
    }
</script>

这样就很好实现了重载效果,关键就是使用js中的arguments对象。


作者:十有三

出处:https://shiyousan.com/post/635475247708919685

版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。


  • 上一篇: Javascript方法的覆盖和重写
  • 下一篇: 鲍鱼壳是否可以防蟑螂和蚊虫?

相关文章
  • 百度站内搜索如何设置和使用自定义样式设计(即不使用模板,使用自定义的模板)
  • jquery ajax error函数和及其参数详细说明
  • limarquee轮番插件图片略微抖动的问题
  • CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件
  • 什么是CSS Sprites技术?
  • CKFinder 3无法删除文件和文件夹出现提示:You cannot delete files in DEMO mode
发表评论
记住昵称

文章分类

.NET技术 122 数据库 24 Web前端 21 网站建设运维 33 操作系统与应用 67 程序猿日常 11 开发工具 11 其他随笔 12

文章标签

ASP.NET ASP.NET MVC C# CSS HTML IIS Javascript Linux MongoDB MySql SQL SQL Server Visual Studio Windows系统 版本控制系统 插件工具 道学 佛经 服务器 搞笑娱乐 好文分享 软件应用 生活知识 诗词 手机问题 随笔 网络知识 网站设计优化 网站维护 养生保健 异常处理 硬件设备 游戏攻略

热门文章

  • 解决IE11安装升级失败和在安装前需要更新的问题
  • 林蛋大与楚中天,朱肚皮与朱月坡
  • jquery ajax error函数和及其参数详细说明
  • 骑马与砍杀 无限箭枝/作弊修改箭枝数量/调整各种箭枝数量的方法
  • 在唯一密钥属性“fileExtension”设置为“.”时,无法添加类型为“mimeMap”的重复集合项

推荐文章

  • 记录MongoDb连接错误System.TimeoutException: A timeout occured after 30000ms selecting a server
  • 吃未熟的猕猴桃导致舌头发麻的解决办法
  • ChinaPay.dll 64位系统导致应用程序池崩溃,异常代码: 0xc0000005
  • MIME 类型大全(收集常用的MIME Type)
  • Windows10中Virtualbox没办法选择和安装64位的Linux系统

最新评论

  • 感谢脖主分享
  • 在“为click once清单签名”的右侧,可以创
  • 用的帝国cms,修改后无效啊。 缓存清理了,浏览
  • 我的需求是:分享出去是同一个网站,但是微信分享需要
  • 试了 的确 有效,只能用english的语言进行安

友情链接

  • Wil的博客
  • Passingwind的博客
  • 坤哥网
  • .NET开发者社区

知识共享许可协议 CC BY-SA 4.0本站作品采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。
闽ICP备15003702号