让JavaScript 轻松支持函数重载 (Part 1 - 设计)

 更新时间:2009年08月04日 00:18:17   作者:  
JavaScript支持函数重载吗?可以说不支持,也可以说支持。说不支持,是因为JavaScript不能好像其它原生支持函数重载的语言一样,直接写多个同名函数,让编译器来判断某个调用对应的是哪一个重载。
JavaScript支持重载吗?
JavaScript支持函数重载吗?可以说不支持,也可以说支持。说不支持,是因为JavaScript不能好像其它原生支持函数重载的语言一样,直接写多个同名函数,让编译器来判断某个调用对应的是哪一个重载。说支持,是因为JavaScript函数对参数列表不作任何限制,可以在函数内部模拟对函数重载的支持。
实际上,在很多著名的开源库当中,我们都可以看到函数内部模拟重载支持的设计。例如说jQuery的jQuery.extend方法,就是通过参数类型判断出可选参数是否存在,如果不存在的话就对参数进行移位以确保后面的逻辑正确运行。我相信很多人在写JavaScript时也写过类似的代码,以求为功能丰富的函数提供一个(或多个)简单的调用入口。
不过做种做法一个根本的问题,那就是违反了DRY原则。每个支持重载的函数内部都多出来一段代码,用于根据参数个数和参数类型处理重载,这些代码暗含着重复的逻辑,写出来却又每一段都不一样。此外,这些代码要维护起来也不容易,因为阅读代码时你并不能一眼看出函数支持的几种重载方式是什么,要对重载做出维护自然也困难。
描述重载入口的DSL
我希望能够在JavaScript中以一种简单的方式来描述重载入口。最好就如同在其它语言中一样,使用函数签名来区分重载入口,因为我认为函数签名就是这方面最好的DSL。我假想中最符合JavaScript语法的重载入口描述DSL应该是这样子的:
复制代码 代码如下:

var sum = new Overload();
sum.add("Number, Number",
function(x, y) { return x + y; });
sum.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });

在描述好重载入口与对应函数体后,对sum函数的调用应该是这样子的:
sum(1, 2);
sum(1, 2, 3);
上述代码在我看来非常清晰,也非常容易维护——你可以一眼看得出重载入口的签名,并且要修改或者增加重载入口都是很容易的事情。但是我们遇到了一个问题,那就是JavaScript里面的函数是不能new出来的,通过new Overload()获得的对象一定不能被调用,为此我们只能把Overload做成一个静态类,静态方法返回的是Function实例:
复制代码 代码如下:

var sum = Overload
.add("Number, Number",
function(x, y) { return x + y; })
.add("Number, Number, Number",
function(x, y, z) { return x + y + z; });

必要的重载入口支持
想象一下,有哪些常见的JavaScript函数入口是用上述DSL无法描述的?我所知道的有两种:
任意类型参数
假想我们要写一个each函数,对于Array就迭代它的下标,对于其它类型就迭代它的所有成员,这两个函数入口的参数列表如何声明?如果用C#,我们会如此描述两个函数入口:
void Each(IEnumerable iterator) { }
void Each(object iterator) { }
然而在JavaScript当中,Object不是一切类型的基类,(100) instanceof Object的结果为false,所以我们不能用Object来指代任意类型,必须引入一个新的符号来指代任意类型。考虑到这个符号不应该与任何可能存在的类名冲突,所以我选择了用"*"来表示任意类型。上述C#代码对应的JavaScript应该是这样子的:
复制代码 代码如下:

var each = Overload
.add("Array",
function(array) { })
.add("*",
function(object) { });

任意数量参数
在JavaScript的函数里面,要求支持任意数量参数是很常见的需求,相信使用率比C#里面的params关键字要多得多。在我们之前制定的规则当中,这也无法描述的,因此我们要引入一个不和类名冲突的符号来表示C#中的params。我选择了用"..."表示params,意思是这里出现任意多个参数都是可以接受的。让我们看看jQuery.extend的重载应该如何描述:
复制代码 代码如下:

var extend = Overload
.add("*, ...",
function(target) { })
.add("Boolean, *, ...",
function(deep, target) { });

小结
在这篇文章当中,我们尝试设计出一种适用于JavaScript且易读易维护的函数重载写法。在下一篇文章当中,我们将会尝试编写Overload类,以实现这一设计。

相关文章

  • 详解Javascript几种跨域方式总结

    详解Javascript几种跨域方式总结

    在实际开发中我们经常需要获取其他域的资源,本篇文章主要介绍了详解Javascript几种跨域方式总结,有兴趣的可以了解一下。
    2017-02-02
  • js图片闪动特效可以控制间隔时间如几分钟闪动一下

    js图片闪动特效可以控制间隔时间如几分钟闪动一下

    这篇文章主要介绍一个图片闪动特效,可以控制间隔时间如几分钟闪动一下,需要的朋友不要错过
    2014-08-08
  • 小程序云开发部署攻略(图文教程)

    小程序云开发部署攻略(图文教程)

    微信小程序的云开发功能刚刚上线,这篇文章主要介绍了小程序云开发部署攻略(图文教程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 使用原生JS实现火锅点餐小程序(面向对象思想)

    使用原生JS实现火锅点餐小程序(面向对象思想)

    这篇文章主要介绍了使用原生JS实现火锅点餐小程序(面向对象思想),在这里小程序使用的是es6开发标准,本文通过代码展示,截图的形式给大家介绍,需要的朋友可以参考下
    2019-12-12
  • 微信小程序npm引入vant-weapp的踩坑记录

    微信小程序npm引入vant-weapp的踩坑记录

    这篇文章主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • JavaScript最完整的深浅拷贝实现方式详解

    JavaScript最完整的深浅拷贝实现方式详解

    这篇文章主要为大家详细介绍了JavaScript最完整的深浅拷贝实现方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • javascript简单实现图片预加载

    javascript简单实现图片预加载

    本文是给大家分享一段简单的实现图片预加载技术的javascript代码,超级精简,却很实用,这里推荐给大家
    2014-12-12
  • JavaScript闭包实例讲解

    JavaScript闭包实例讲解

    众所周知,JavaScript没有块级作用域,只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的,而在一个函数内部任何位置定义的变量,在该函数内部任何地方都可见
    2014-04-04
  • JavaScript执行效率与性能提升方案

    JavaScript执行效率与性能提升方案

    如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率,需要的朋友可以参考下
    2012-12-12
  • 设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

    设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

    不用找了我试过好多次ie、火狐、谷歌浏览器此代码都是不可逆兼容,想把这个问题完全解决,方法就是像其他主流网站一样,下面是我的简单解决方案
    2013-03-03

最新评论