资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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 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,find1find2啊!这里的关键在于old属性。

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

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

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

JavaScript函数重载

版权声明

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

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


标题名称:JavaScript函数重载-创新互联
分享URL:http://cdkjz.cn/article/dsohhg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220