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以及本文地址:
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/
</div>
相關文章
- javascript函式過載的實現JavaScript函式
- javascript如何實現函式過載JavaScript函式
- javascript模擬實現函式過載JavaScript函式
- JavaScript中的函式過載(Function overloading)JavaScript函式Function
- TypeScript 函式過載TypeScript函式
- 函式模板過載函式
- JavaScript 函式惰性載入JavaScript函式
- C++ 函式過載,函式模板和函式模板過載,選擇哪一個?C++函式
- 過載的奧義之函式過載函式
- C++函式過載C++函式
- 02-函式過載函式
- 函式過載與函式模板的區別函式
- C++ 過載運算子和過載函式C++函式
- Python 函式如何過載?Python函式
- C++之函式過載C++函式
- Python 類,函式過載Python函式
- C++的函式過載C++函式
- js實現函式過載JS函式
- c語言中通過函式指標實現函式過載C語言函式指標
- C++ 函式過載和模板C++函式
- PHP中實現函式過載PHP函式
- C++的函式的過載C++函式
- JS函式過載解決方案JS函式
- 過載運算子、解構函式函式
- 為什麼 Python 沒有函式過載?如何用裝飾器實現函式過載?Python函式
- javaScript函式JavaScript函式
- python中實現函式過載Python函式
- python函式過載是什麼?Python函式
- TypeScript基礎入門-函式-過載TypeScript函式
- PHP中實現函式過載薦PHP函式
- 通過JavaScript定義函式的注意點JavaScript函式
- C++行內函數、函式過載與函式預設引數C++函數函式
- C/C++—— C++中函式重寫和函式過載C++函式
- 開心檔之C++ 過載運算子和過載函式C++函式
- javaScript過載JavaScript
- 【轉】eval()函式(javascript) - [javaScript]函式JavaScript
- 在 Python 中實現函式過載Python函式
- C++入門教程(14):過載函式C++函式