让JavaScript轻松支持函数重载(Part 1

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类,以实现这一设计。

时间: 2024-08-31 07:15:38

让JavaScript轻松支持函数重载(Part 1的相关文章

让JavaScript轻松支持函数重载(Part 2

在"让 JavaScript 轻松支持函数重载 (Part 1 - 设计)"里,我们设计了一套能在JavaScript中描述函数重载的方法,这套方法依赖于一个叫做Overload的静态类,现在我们就来看看如何实现这个静态类. 识别文本签名 我们先来回顾一下上一篇文章中提到的Overload用例: var extend = Overload .add("*, ...", function(target) { }) .add("Boolean, *, ...&

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

JavaScript支持重载吗? JavaScript支持函数重载吗?可以说不支持,也可以说支持.说不支持,是因为JavaScript不能好像其它原生支持函数重载的语言一样,直接写多个同名函数,让编译器来判断某个调用对应的是哪一个重载.说支持,是因为JavaScript函数对参数列表不作任何限制,可以在函数内部模拟对函数重载的支持. 实际上,在很多著名的开源库当中,我们都可以看到函数内部模拟重载支持的设计.例如说jQuery的jQuery.extend方法,就是通过参数类型判断出可选参数是否存在

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)_javascript技巧

识别文本签名 我们先来回顾一下上一篇文章中提到的Overload用例: 复制代码 代码如下: var extend = Overload .add("*, ...", function(target) { }) .add("Boolean, *, ...", function(deep, target) { }); 我们允许用户输入一个字符串,表示某一个重载的签名.在用户调用函数时,我们需要拿着用户输入的参数实例去跟签名上的每一个参数类型作比较,因此我们需要先把这个

javascript中没有函数重载的概念实例讲解

  这篇文章主要介绍了通过实例理解javascript中没有函数重载的概念,十分的简单易懂,需要的朋友可以参考下 将函数名想象为指针,也有助于理解为什么ECMAScript中没有函数重载的概念.如下例子: 代码如下: function addSomeNum(num) { return num+100; } function addSomeNum(num) { return num+200; } var result=addSomeNum(100);//300 显然,这个例子中声明了两个同名函数,

JavaScript中的函数重载深入理解_javascript技巧

在JavaScript中有一种特殊的数据类型---Function类型,JavaScript的每个函数都是Function类型的实例.由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定. <pre name="code" class="html">function sum(num1,num2) { return num1 +num2; } alert(sum(10,10)); //20 var other = sum; ale

通过实例理解javascript中没有函数重载的概念_javascript技巧

将函数名想象为指针,也有助于理解为什么ECMAScript中没有函数重载的概念.如下例子: 复制代码 代码如下: function addSomeNum(num) {     return num+100; } function addSomeNum(num) {     return num+200; } var result=addSomeNum(100);//300 显然,这个例子中声明了两个同名函数,而结果则是后面的函数覆盖了前面的函数.以上代码实际上与下面的代码是一致的. 复制代码 代

Javascript函数重载的例子介绍

js本身不支持重载,因为方法调用只与方法名相关,而不计较参数的数量和类型,也正是这个特点,我们可以用更简单的方法实现重载. 我们可以通过数组arguments来获取变量,再根据arguments.length来执行不同的操作. 简例: function getSum(){     //这是计算总和的函数     var sum=0;     for(var i=0;i<arguments.length;i++){         sum+=arguments[i];     }     retu

JS函数重载的解决方案_javascript技巧

在面向对象的编程中,很多语言都支持函数重载,能根据函数传递的不同个数.类型的参数来做不同的操作,JS对它却不支持,需要我们额外做些小动作. 在JS的函数执行上下文中有一个名为arguments的有意思的变量,它以数组的形式存储了函数执行时传递过来的所有参数,即使函数定义没有定义这 么多个形参.还有一个特别之处就是跟Array类型相比,arguments变量有且只有一个length属性,Array的方法,例如push.pop 等,它并不具备,它只是一个"伪数组":具有length属性,存

C语言实现函数重载

函数重载 大家都知道 C++ 等支持面向对象的语言支持函数重载,那么编译器是如何辨别这些函数的呢? CPP如何实现重载 C++ 实现函数重载很大程度上依赖与编译器对函数名的 Mangling(损坏,破坏),即 C++ 的源代码被编译后同名的重载函数名字会被破坏,一般是在原函数名前后加上特定的字符串(g++编译器中通过在函数名后面添加参数的后缀),以区分不同重载函数,然后在调用的时候根据参数的不同选择合适的函数,如下代码说明了编译器是如何处理普通函数重载的 几个同名的重载函数仍然是不同的函数,编译