DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 為JavaScript添加重載函數的輔助方法
為JavaScript添加重載函數的輔助方法
編輯:關於JavaScript     
JavaScript的重載函數,一般是靠對arguments判斷來操作的。
比如:
復制代碼 代碼如下:
var afunc = function() {
args = arguments;
if(args.length == 1) {
console.log(1);
}else if(args.length == 2) {
console.log(2);
}else if (args.length == 3) {
console.log(3);
}
}

可以想象如果重載數量多的時候,要有多少的if-else判斷啊(事實上重載數量應該不會太多吧)。
如果要對js函數進行重載,代碼量肯定是多的。那麼能不能想辦法使代碼清晰點,再減少那些相同代碼的書寫呢?
這就是我寫篇文章和相關代碼的起因了。
慣例先上代碼:
復制代碼 代碼如下:
/** KOverLoad
一個創建重載函數的輔助方法。
其實這個方法只是幫忙整理了參數不同的情況下的重載方法。
如果還要對參數類型進行判斷重載的話,請在提供的方法中自己實現。
@Author ake 2010-05-02
@weblog http://www.cnblogs.com/akecn
*/
var KOverLoad = function(scope) {
this.scope = scope || window; //默認添加方法到這個對象中。同時添加的方法的this指向該對象。
this.list = {}; //存放重載函數的地方。
return this;
};
KOverLoad.prototype = {
//添加一個重載的方法。
//@param arg<Function> 重載的方法。
add:function(arg) {
if(typeof arg == "function") {
this.list[arg.length] = arg; //以參數數量做標識存儲重載方法。很顯然如果你的重載方法參數數量
}
return this;
},
//添加完所有的重載函數以後,調用該方法來創建重載函數。
//@param fc<String> 重載函數的方法名。
load:function(fc) {
var self = this, args, len;
this.scope[fc] = function() { //將指定作用域的指定方法 設為重載函數。
args = Array.prototype.slice.call(arguments, 0); //將參數轉換為數組。
len = args.length;
if(self.list[len]) { //根據參數數量調用符合的重載方法。
self.list[len].apply(self.scope, args); //這裡指定了作用域和參數。
}else{
throw new Error("undefined overload type");
}
}
}
};

使用 方法是我覺得比較清晰的方法:
//這是可選的作用對象。
復制代碼 代碼如下:
var s =function(){}
s.prototype = {
init:function() {
console.log();
}
}

//構造函數的參數可以是Object類型的或者其他合法的類型,如果不指定,則注冊到window對象中,並且作用域也是window。其實就是添加該重載方法到什麼地方而已。
復制代碼 代碼如下:
new KOverLoad(s.prototype).add(function(a) {
console.log("one",a,this)
})
 .add(function(a,b) {
console.log("two",a,b,this)
})
 .add(function(a,b,c) {
console.log("three",a,b,c,this)
})
 .add(function(a,b,c,d) {
console.log("four",a,b,c,d,this)
})
 .load("func"); //在這裡的參數就是要創建的重載函數的方法名稱。

完成以上操作以後,s.func就是一個重載函數。
我們可以這樣調用重載函數:
復制代碼 代碼如下:
var t = new s();
t.func();//拋出錯誤異常。因為沒有指定零參數時的函數
t.func(”o”);//one o Object {}
t.func(1,2);//two 1 2 Object {}

簡單的代碼而已,如果各位有建議或者意見,歡迎留言指教。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved