JavaScript函数重载

译者按: jQuery之父John Resig巧妙地利用了闭包,实现了JavaScript函数重载

原文: JavaScript Method Overloading

译者: Fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

在一个业余项目中,我写了一个简单的addMethod函数,用于实现函数重载(Method Overloading)。而所谓函数重载,就是函数名称一样,但是输入输出不一样。或者说,允许某个函数有各种不同输入,根据不同的输入,调用不同的函数,然后返回不同的结果。

addMethod函数如下:

// addMethod - By John Resig (MIT Licensed)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函数,简单的理解,就是给某个object,添加一个指定name的函数fn。它利用了闭包,可以通过old变量将先后绑定的函数链接起来。

你可以这样使用addMethod函数,将find函数直接添加到每个对象实例:

function Users(){ addMethod(this, "find", function(){ // Find all users... }); addMethod(this, "find", function(name){ // Find a user by name }); addMethod(this, "find", function(first, last){ // Find a user by first and last name });}

你也可以将find函数添加到对象的prototype,这样所有对象实例将共享find函数:

function Users(){ addMethod(Users.prototype, "find", function(){ // Find all users... }); addMethod(Users.prototype, "find", function(name){ // Find a user by name }); addMethod(Users.prototype, "find", function(first, last){ // Find a user by first and last name });}

users对象的find方法成功实现了重载,可以根据不同的输入调用不同的函数:

var users = new Users();users.find(); // Finds allusers.find("John"); // Finds users by nameusers.find("John", "Resig"); // Finds users by first and last nameusers.find("John", "E", "Resig"); // Does nothing

这种方法有一些明显的缺陷:

  • 重载只能处理输入参数个数不同的情况,它不能区分参数的类型、名称等其他要素。(ECMAScript 4计划支持这一特性,称作Multimethods,然而该版本已被放弃)。
  • 重载过的函数将会有一些额外的负载,对于性能要求比较高的应用,使用这个方法要慎重考虑。

addMethod函数的秘诀之一在于fn.length。或许很多人并不清楚,所有函数都有一个length属性,它的值等于定义函数时的参数个数。比如,当你定义的函数只有1个参数时,其length属性为1:

(function(foo){}).length == 1

我做了一下测试,发现这个实现函数重载的方法适用于所有浏览器,如果有问题的话请与我联系。

如果你担心只绑定单个函数时的性能问题,你可以使用如下addMethod函数:

// addMethod - By John Resig (MIT Licensed)function addMethod(object, name, fn){ var old = object[ name ]; if ( old ) object[ name ] = function(){ if ( fn.length == arguments.length ) return fn.apply( this, arguments ); else if ( typeof old == 'function' ) return old.apply( this, arguments ); }; else object[ name ] = fn;}

这样绑定第一个函数时,将不会有额外的操作,既简单又快速。当绑定更多函数时,则与原addMethod函数一样,会有额外的性能损失。

这样做还有一个额外的好处:对于那些参数个数不符合要求的函数调用,将统一又第一个绑定的函数处理。这时调用find方法的输出如下:

var users = new Users();users.find(); // Finds allusers.find("John"); // Finds users by nameusers.find("John", "Resig"); // Finds users by first and last nameusers.find("John", "E", "Resig"); // Finds all

本文介绍的方法不能改变世界,但是它很代码量很少、很简单,巧妙地使用了JavaScript的特性。因此,我在我的书《Secrets of the JavaScript Ninja》也介绍了这个方法。

完整示例

根据原文介绍的方法,译者实现了一个完整的示例代码:

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); };}// 不传参数时,返回所有namefunction find0(){   return this.names;}// 传一个参数时,返回firstName匹配的namefunction find1(firstName){   var result = [];   for (var i = 0; i < this.names.length; i++) {     if (this.names[i].indexOf(firstName) === 0) {       result.push(this.names[i]);     }   }   return result;}// 传两个参数时,返回firstName和lastName都匹配的namefunction find2(firstName, lastName){  var result = [];   for (var i = 0; i < this.names.length; i++) {     if (this.names[i] === (firstName + " " + lastName)) {       result.push(this.names[i]);     }   }   return result;}function Users(){ addMethod(Users.prototype, "find", find0); addMethod(Users.prototype, "find", find1); addMethod(Users.prototype, "find", find2);}var users = new Users();users.names = ["John Resig", "John Russell", "Dean Tom"];console.log(users.find()); // 输出[ 'John Resig', 'John Russell', 'Dean Tom' ]console.log(users.find("John")); // 输出[ 'John Resig', 'John Russell' ]console.log(users.find("John", "Resig")); // 输出[ 'John Resig' ]console.log(users.find("John", "E", "Resig")); // 输出undefined

凭直觉,函数重载可以通过if…else或者switch实现,这就不去管它了。jQuery之父John Resig提出了一个非常巧(bian)妙(tai)的方法,利用了闭包。

从效果上来说,users对象的find方法允许3种不同的输入: 0个参数时,返回所有人名;1个参数时,根据firstName查找人名并返回;2个参数时,根据完整的名称查找人名并返回。

难点在于,users.find事实上只能绑定一个函数,那它为何可以处理3种不同的输入呢?它不可能同时绑定3个函数find0,find1find2啊!这里的关键在于old属性。

addMethod函数的调用顺序可知,users.find最终绑定的是find2函数。然而,在绑定find2时,oldfind1;同理,绑定find1时,oldfind0。3个函数find0,find1find2就这样通过闭包链接起来了。

根据addMethod的逻辑,当fn.lengtharguments.length不匹配时,就会去调用old,直到匹配为止。

版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/

您的用户遇到BUG了吗?

体验Demo 免费使用

.copyright * { box-sizing: border-box; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏不会写文章的程序员不是好厨师

使用ASM实现简单的AOP

之前一直使用greys及其内部升级二次开发版来排查问题。最近周末刚好事情不多,作为一名程序员本能地想要弄懂这么神奇的greys到底是怎么实现的?周末从githu...

1362
来自专栏desperate633

LeetCode 20. Valid Parentheses题目分析代码

给定一个字符串所表示的括号序列,包含以下字符: '(', ')', '{', '}', '[' and ']', 判定是否是有效的括号序列。

752
来自专栏张善友的专栏

Dynamite动态排序库

易于使用和高性能动态排序库支持类似 SQL 语法和嵌套/复杂的表达式,使用 System.Linq.Expression 动态生成快速比较器。 使用此库就可以使...

18910
来自专栏大内老A

yield在WCF中的错误使用——99%的开发人员都有可能犯的错误[下篇]

昨天写了《yield在WCF中的错误使用——99%的开发人员都有可能犯的错误[上篇]》,引起了一些讨论。关于yield关键字这个语法糖背后的原理(C#编译器将它...

1798
来自专栏一个会写诗的程序员的博客

spring boot 集成mybatis 注解版查询

spring boot 和 mybatis已经正常集成,在使用查询时使用的是注解,(项目没有任何XML文件)

761
来自专栏木宛城主

Unity应用架构设计(9)——构建统一的 Repository

谈到 『Repository』 仓储模式,第一映像就是封装了对数据的访问和持久化。Repository 模式的理念核心是定义了一个规范,即接口『Interfa...

1936
来自专栏函数式编程语言及工具

泛函编程(25)-泛函数据类型-Monad-Applicative

    上两期我们讨论了Monad。我们说Monad是个最有概括性(抽象性)的泛函数据类型,它可以覆盖绝大多数数据类型。任何数据类型只要能实现flatMap+u...

2199
来自专栏大内老A

你知道Unity IoC Container是如何创建对象的吗?

Unity是微软P&P推出的一个开源的IoC框架,最新的官方版本是2.0。Unity之前的版本建立在一个称为ObjectBuild的组件上,熟悉EnterLib...

1808
来自专栏Android开发实战

设计模式-单例模式

单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一。

593
来自专栏java架构师

C#泛型详解

我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多...

2726

扫码关注云+社区