JavaScript函數(shù)重載

本文和大家分享的主要是javascript中函數(shù)重載相關(guān)內(nèi)容，一起來看看吧，希望對(duì)大家學(xué)習(xí)javascript有所幫助。

　　在一個(gè)業(yè)余項(xiàng)目中，我寫了一個(gè)簡單的 addMethod 函數(shù)，用于實(shí)現(xiàn)函數(shù)重載(Method Overloading) 。而所謂 函數(shù)重載 ，就是函數(shù)名稱一樣，但是輸入輸出不一樣?；蛘哒f，允許某個(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ù)，簡單的理解，就是給某個(gè) object ，添加一個(gè)指定 name 的函數(shù) fn 。它利用了 閉包 ，可以通過 old 變量將先后綁定的函數(shù)鏈接起來。

　　你可以這樣使用 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，然而該版本已被放棄)。

　?。?nbsp;重載過的函數(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ù)重載 的方法適用于所有瀏覽器，如果有問題的話請(qǐng)與我聯(lián)系。

　　如果你擔(dān)心只綁定單個(gè)函數(shù)時(shí)的性能問題，你可以使用如下 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ì)有額外的操作，既簡單又快速。當(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

　　本文介紹的方法不能改變世界，但是它很代碼量很少、很簡單，巧妙地使用了JavaScript的特性。因此，我在我的書《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í)，返回所有namefunction find0(){

　　return this.names;

　　}

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

　　}

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

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

　　從效果上來說， 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 就這樣通過閉包鏈接起來了。

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

 

 

來源：Fundebug博客