JavaScript函数重载
译者按: jQuery之父John Resig巧妙地利用了闭包,实现了JavaScript函数重载。
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
在一个业余项目中,我写了一个简单的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 all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.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 all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.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);
};
}
// 不传参数时,返回所有name
function find0()
{
return this.names;
}
// 传一个参数时,返回firstName匹配的name
function 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都匹配的name
function 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,find1与find2啊!这里的关键在于old属性。
由addMethod函数的调用顺序可知,users.find最终绑定的是find2函数。然而,在绑定find2时,old为find1;同理,绑定find1时,old为find0。3个函数find0,find1与find2就这样通过闭包链接起来了。
根据addMethod的逻辑,当fn.length与arguments.length不匹配时,就会去调用old,直到匹配为止。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!
版权声明
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/
JavaScript函数重载的更多相关文章
- javascript 函数重载 overloading
函数重载 https://en.wikipedia.org/wiki/Function_overloading In some programming languages, function over ...
- [转载]浅谈JavaScript函数重载
原文地址:浅谈JavaScript函数重载 作者:ChessZhang 上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都 ...
- Javascript函数重载,存在呢—还是存在呢?
1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型 ...
- javascript arguments与javascript函数重载
1.所 有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数.他不是一个数组,如果用typeof arguments,返回的是’object’.虽然我们可以用调用数据的方法来调用 ...
- JavaScript “函数重载”
函数重载(function overloading)必须依赖两件事情:判断传入参数数量的能力和判断传入参数类型的能力. JavaScript的每个函数都带有一个仅在这个函数范围内作用的变量argume ...
- 浅谈JavaScript函数重载
上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来.不过那天晚上,还是很惊喜的接到了HR面电话.现在HR ...
- javascript 函数重载另一种实现办法
最近在读javascript忍者 感受下jquery作者 john Resig对于js的独到见解. 先上代码: function addMethod(object,name,fn){ var old ...
- 理解javascript函数的重载
javascript其实是不支持重载的,这篇文章会和java语言函数的重载对比来加深对javascript函数重载的理解. 以下我会假设读者不了解什么是重载所以会有一些很基础的概念 ...
- JavaScript模拟函数重载
JavaScript是没有函数重载的,但是我们可以通过其他方法来模拟函数重载,如下所示: <!DOCTYPE html> <html> <head> <met ...
随机推荐
- 【ZCTF】easy reverse 详解
0x01 前言 团队逆向牛的解题思路,分享出来~ 0x02 内容 0. 样本 bbcdd1f7-9983-4bf4-9fde-7f77a6b947b4.dll 1. 静态分析 使用IDAP ...
- 基于C++Qt4开发的白鸽局域网聊天器
开源项目Github链接:https://github.com/u014427391/chitchat1.0 欢迎star (1)群聊主界面,有工具栏,工具栏功能分别是发送文件.打开音乐播放器.保存聊 ...
- dedecms中arclist标签做分页以及分页点击模块样式错乱问题
in 使用织梦建站,通常会调用到一个文章列表,dedecms官网list标签没有提供typeid的属性,首页或多列表部分情况下使用分页并不方便,这就需要用arclist标签实现一个分页功能:以下还是展 ...
- [原创]K8Cscan插件之存活主机扫描
[原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...
- Redis(4)---主从复制
Redis主从复制 一.环境搭建 既然是主从复制,那肯定需要多个redis服务器,下面我先创建3个服务器,™的端口号分别是:6379.6380.6381. 1.复制默认配置文件redis ...
- x-pack-5.6.10激活教程
x-pack-5.6.10激活教程 简介 X-Pack 已经作为 Elastic 公司单独的产品线,前身是 Shield, Watcher, Marvel, Graph, 和 reporting,先来 ...
- 小程序开发--template模板
小程序的template模板可以说是我遇到的最简单的了,看看实例: <template name="article"> <view class='containe ...
- Python 与 Javascript 之比较
最近由于工作的需要开始开发一些Python的东西,由于之前一直在使用Javascript,所以会不自觉的使用一些Javascript的概念,语法什么的,经常掉到坑里.我觉得对于从Javascript转 ...
- Python面向对象基础:设置对象属性
用类存储数据 类实际上就是一个数据结构,对于python而言,它是一个类似于字典的结构.当根据类创建了对象之后,这个对象就有了一个数据结构,包含一些赋值了的属性.在这一点上,它和其它语言的struct ...
- vue_drf之支付宝接口
一.配置 1,生成应用秘钥和公钥 下载对应系统的秘钥生成工具: https://doc.open.alipay.com/docs/doc.htm?treeId=291&articleId=10 ...