您好,登錄后才能下訂單哦!
譯者按: jQuery之父John Resig巧妙地利用了閉包,實現(xiàn)了JavaScript函數(shù)重載。
原文: JavaScript Method Overloading
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。
在一個業(yè)余項目中,我寫了一個簡單的addMethod函數(shù),用于實現(xiàn)函數(shù)重載(Method Overloading)。而所謂函數(shù)重載,就是函數(shù)名稱一樣,但是輸入輸出不一樣?;蛘哒f,允許某個函數(shù)有各種不同輸入,根據(jù)不同的輸入,調用不同的函數(shù),然后返回不同的結果。
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ù),簡單的理解,就是給某個object,添加一個指定name的函數(shù)fn。它利用了閉包,可以通過old變量將先后綁定的函數(shù)鏈接起來。
你可以這樣使用addMethod函數(shù),將find函數(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ù)添加到對象的prototype,這樣所有對象實例將共享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對象的find方法成功實現(xiàn)了重載,可以根據(jù)不同的輸入調用不同的函數(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
這種方法有一些明顯的缺陷:
addMethod函數(shù)的秘訣之一在于fn.length?;蛟S很多人并不清楚,所有函數(shù)都有一個length屬性,它的值等于定義函數(shù)時的參數(shù)個數(shù)。比如,當你定義的函數(shù)只有1個參數(shù)時,其length屬性為1:
(function(foo){}).length == 1
我做了一下測試,發(fā)現(xiàn)這個實現(xiàn)函數(shù)重載的方法適用于所有瀏覽器,如果有問題的話請與我聯(lián)系。
如果你擔心只綁定單個函數(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;
}
這樣綁定第一個函數(shù)時,將不會有額外的操作,既簡單又快速。當綁定更多函數(shù)時,則與原addMethod函數(shù)一樣,會有額外的性能損失。
這樣做還有一個額外的好處:對于那些參數(shù)個數(shù)不符合要求的函數(shù)調用,將統(tǒng)一又第一個綁定的函數(shù)處理。這時調用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》也介紹了這個方法。
根據(jù)原文介紹的方法,譯者實現(xiàn)了一個完整的示例代碼:
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ù)時,返回所有name
function find0()
{
return this.names;
}
// 傳一個參數(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;
}
// 傳兩個參數(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
憑直覺,函數(shù)重載可以通過if…else或者switch實現(xiàn),這就不去管它了。jQuery之父John Resig提出了一個非常巧(bian)妙(tai)的方法,利用了閉包。
從效果上來說,users對象的find方法允許3種不同的輸入: 0個參數(shù)時,返回所有人名;1個參數(shù)時,根據(jù)firstName查找人名并返回;2個參數(shù)時,根據(jù)完整的名稱查找人名并返回。
難點在于,users.find事實上只能綁定一個函數(shù),那它為何可以處理3種不同的輸入呢?它不可能同時綁定3個函數(shù)find0,find1與find2??!這里的關鍵在于old屬性。
由addMethod函數(shù)的調用順序可知,users.find最終綁定的是find2函數(shù)。然而,在綁定find2時,old為find1;同理,綁定find1時,old為find0。3個函數(shù)find0,find1與find2就這樣通過閉包鏈接起來了。
根據(jù)addMethod的邏輯,當fn.length與arguments.length不匹配時,就會去調用old,直到匹配為止。
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監(jiān)控。 自從2016年雙十一正式上線,F(xiàn)undebug累計處理了7億+錯誤事件,得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認可。歡迎免費試用!
轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。