譯者按: jQuery之父John Resig巧妙地利用了閉包，實(shí)現(xiàn)了JavaScript函數(shù)重載。

成都創(chuàng)新互聯(lián)專注于瑯琊網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供瑯琊營(yíng)銷型網(wǎng)站建設(shè)，瑯琊網(wǎng)站制作、瑯琊網(wǎng)頁(yè)設(shè)計(jì)、瑯琊網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造瑯琊網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供瑯琊網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

• 原文: JavaScript Method Overloading

• 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

在一個(gè)業(yè)余項(xiàng)目中，我寫了一個(gè)簡(jiǎn)單的addMethod函數(shù)，用于實(shí)現(xiàn)函數(shù)重載(Method Overloading)。而所謂函數(shù)重載，就是函數(shù)名稱一樣，但是輸入輸出不一樣?；蛘哒f(shuō)，允許某個(gè)函數(shù)有各種不同輸入，根據(jù)不同的輸入，調(diào)用不同的函數(shù)，然后返回不同的結(jié)果。

addMethod函數(shù)如下:

// 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函數(shù)，簡(jiǎn)單的理解，就是給某個(gè)object，添加一個(gè)指定name的函數(shù)fn。它利用了閉包，可以通過(guò)old變量將先后綁定的函數(shù)鏈接起來(lái)。

你可以這樣使用addMethod函數(shù)，將find函數(shù)直接添加到每個(gè)對(duì)象實(shí)例：

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函數(shù)添加到對(duì)象的prototype，這樣所有對(duì)象實(shí)例將共享find函數(shù):

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對(duì)象的find方法成功實(shí)現(xiàn)了重載，可以根據(jù)不同的輸入調(diào)用不同的函數(shù)：

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

這種方法有一些明顯的缺陷:

• 重載只能處理輸入?yún)?shù)個(gè)數(shù)不同的情況，它不能區(qū)分參數(shù)的類型、名稱等其他要素。(ECMAScript 4計(jì)劃支持這一特性，稱作Multimethods，然而該版本已被放棄)。
• 重載過(guò)的函數(shù)將會(huì)有一些額外的負(fù)載，對(duì)于性能要求比較高的應(yīng)用，使用這個(gè)方法要慎重考慮。

addMethod函數(shù)的秘訣之一在于fn.length。或許很多人并不清楚，所有函數(shù)都有一個(gè)length屬性，它的值等于定義函數(shù)時(shí)的參數(shù)個(gè)數(shù)。比如，當(dāng)你定義的函數(shù)只有1個(gè)參數(shù)時(shí)，其length屬性為1：

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

我做了一下測(cè)試，發(fā)現(xiàn)這個(gè)實(shí)現(xiàn)函數(shù)重載的方法適用于所有瀏覽器，如果有問(wèn)題的話請(qǐng)與我聯(lián)系。

如果你擔(dān)心只綁定單個(gè)函數(shù)時(shí)的性能問(wèn)題，你可以使用如下addMethod函數(shù)：

// 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;
}

這樣綁定第一個(gè)函數(shù)時(shí)，將不會(huì)有額外的操作，既簡(jiǎn)單又快速。當(dāng)綁定更多函數(shù)時(shí)，則與原addMethod函數(shù)一樣，會(huì)有額外的性能損失。

這樣做還有一個(gè)額外的好處：對(duì)于那些參數(shù)個(gè)數(shù)不符合要求的函數(shù)調(diào)用，將統(tǒng)一又第一個(gè)綁定的函數(shù)處理。這時(shí)調(diào)用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

本文介紹的方法不能改變世界，但是它很代碼量很少、很簡(jiǎn)單，巧妙地使用了JavaScript的特性。因此，我在我的書(shū)《Secrets of the JavaScript Ninja》也介紹了這個(gè)方法。

完整示例

根據(jù)原文介紹的方法，譯者實(shí)現(xiàn)了一個(gè)完整的示例代碼：

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);
    };
}

// 不傳參數(shù)時(shí)，返回所有name
function find0()
{　　
    return this.names;
}

// 傳一個(gè)參數(shù)時(shí)，返回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;
}

// 傳兩個(gè)參數(shù)時(shí)，返回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

憑直覺(jué)，函數(shù)重載可以通過(guò)if…else或者switch實(shí)現(xiàn)，這就不去管它了。jQuery之父John Resig提出了一個(gè)非常巧(bian)妙(tai)的方法，利用了閉包。

從效果上來(lái)說(shuō)，users對(duì)象的find方法允許3種不同的輸入: 0個(gè)參數(shù)時(shí)，返回所有人名；1個(gè)參數(shù)時(shí)，根據(jù)firstName查找人名并返回；2個(gè)參數(shù)時(shí)，根據(jù)完整的名稱查找人名并返回。

難點(diǎn)在于，users.find事實(shí)上只能綁定一個(gè)函數(shù)，那它為何可以處理3種不同的輸入呢？它不可能同時(shí)綁定3個(gè)函數(shù)find0,find1與find2??！這里的關(guān)鍵在于old屬性。

由addMethod函數(shù)的調(diào)用順序可知，users.find最終綁定的是find2函數(shù)。然而，在綁定find2時(shí)，old為find1；同理，綁定find1時(shí)，old為find0。3個(gè)函數(shù)find0,find1與find2就這樣通過(guò)閉包鏈接起來(lái)了。

根據(jù)addMethod的邏輯，當(dāng)fn.length與arguments.length不匹配時(shí)，就會(huì)去調(diào)用old，直到匹配為止。

關(guān)于Fundebug

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了7億+錯(cuò)誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：JavaScript函數(shù)重載-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.rwnh.cn/article46/dsohhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、域名注冊(cè)、ChatGPT、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)