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,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、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用！

JavaScript函數重載

版權聲明

轉載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/

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

標題名稱：JavaScript函數重載-創新互聯
當前鏈接：http://vcdvsql.cn/article46/dsohhg.html

成都網站建設公司_創新互聯，為您提供定制網站、企業網站制作、網頁設計公司、域名注冊、ChatGPT、標簽優化

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JavaScript函數重載-創新互聯

完整示例

關于Fundebug

版權聲明