JavaScript實現可變參數函數，javascript可變參數

JavaScript實現可變參數函數，javascript可變參數

使用javascript類庫函數時，經常會遇到一個函數，可以使用不同個數的參數的情況

比如：

.代碼 

1. exp(var1) exp(var1, var2)  

 

 

但是在實際編寫javascript函數時，

函數不能同名，所以不可能是不同參數個數分開寫；

參數個數必須符合函數的設定，所以函式宣告裡有的就必須有，不可能調用時寫少幾個；

……

這個問題是困擾了很久了，一直不知道為什嗎？！

今天一早在看別人代碼，無意中竟然看到了~

 

原來不是在函式宣告中聲明參數個數，而是在函數裡直接接收使用,那怎麼接收呢？

就是 arguments 了可以500%提高開發效率的前端UI架構！

arguments雖然不是數組，但可以當作數組使用，下標由 0 開始，所以：

arguments[0] 表示接收的第一個參數
arguments[1] 表示接收的第二個參數
……
如此類推……

這樣就可以實現不同參數調用同一個函數了~

當然，前提是函數設定了對該參數的處理方法，不然還是白搭

順便搜尋了一下arguments的介紹，一併貼出：

arguments 屬性
為當前執行的 function 對象返回一個arguments 對象。

function.arguments

function 參數是當前執行函數的名稱，可以省略。

說明
通過 arguments 屬性，函數可以處理可變數量的參數。 arguments 對象的 length 屬性包含了傳遞給函數的參數的數目。對於arguments 對象所包含的單個參數，其存取方法與數組中所包含的參數的存取方法相同。

樣本
下面的例子說明了 arguments 屬性的用法： 可以500%提高開發效率的前端UI架構！

.代碼 

1. function ArgTest(){  
2.     var i, s, numargs = arguments.length;  
3.     s = numargs;  
4.     if (numargs < 2)  
5.         s += " argument was passed to ArgTest. It was ";  
6.     else  
7.          s += " arguments were passed to ArgTest. They were " ;  
8.     for (i = 0; i < numargs; i++)  
9. {  
10. s += arguments[i] + " ";  
11. }  
12. return(s);  
13. }  

 

 

巧用arguments

    在 Javascript 的函數中有個名為 arguments 的類數組對象。它看起來是那麼的詭異而且名不經傳，但眾多的 Javascript 庫都使用著它強大的功能。所以，它的特性需要每個 Javascript 程式員去熟悉它。

它以類似數組的形式儲存了當前調用的參數。而它實際上並不是個數組，使用 typeof arguments 語句嘗試會返回“object”（對象），所以它不能像 Array 一樣使用 push 和 pop 等方法。即便如此，仍然可以使用下標以及長度屬性（length）擷取它的值。

編寫靈活的函數
   雖看起來名不經傳，但的確 arguments 是非常有用的對象。比如，你可以讓函數處理不定數目的參數。在 Dean Edwards 寫的 base2 庫中，有個叫 format 的函數充分發揮了這一特性： 可以500%提高開發效率的前端UI架構！

.代碼 

1. function format(string) {  
2.     var args = arguments;  
3.     var pattern = new RegExp("%([1-" + arguments.length + "])", "g");  
4.     return String(string).replace(pattern, function(match, index) {  
5.        return args[index];  
6.     });  
7. };  

 

 

   replace這個函數的第二個參數可以為一個函數,函數的第一個參數可以為匹配了的文本,第二個參數為第幾個匹配的值,返回值為要進行替換的文本

   這個函數實現了模板替換，你可以在要動態替換的地方使用 %1 到 %9 標記，然後其餘的參數就會依次替換這些地方。例如：format("And the %1 want to know whose %2 you %3", "papers", "shirt", "wear");
   上面的指令碼就會返回"And the papers want to know whose shirt you wear" 。
   在這裡需要注意的是，即便在 format 函數定義中，我們僅定義了個名為 string 的參數。而 Javascript 不管函數自身定義的參數數量，它都允許我們向一個函數傳遞任意數量的參數，並將這些參數值儲存到被調用函數的 arguments 對象中。

 

轉換成實際數組
   雖然 arguments 對象並不是真正意義上的 Javascript 數組，但是我們可以使用數組的 slice 方法將其轉換成數組，類似下面的代碼

.代碼 

1. var args = Array.prototype.slice.call(arguments);  

 

 

call(obj,當前函數使用的參數列表)可以500%提高開發效率的前端UI架構！

   call 方法第一個參數為一個對象,這個傳進去的對象將調用slice函數.因為arguments不是一個數組,所以不能直接調用slice方法,所以只能使用 ''對象冒充''方法了。這樣，陣列變數 args 包含了所有 arguments 對象包含的值。

 

使參數構建函數
   使用 arguments 對象能夠簡短我們編寫的 Javascript 代碼量。下面有個名為 makeFunc 的函數，它根據你提供的函數名稱以及其他任意數目的參數，然後返回個匿名函數。此匿名函數被調用時，合并的原先被調用的參數，並交給指定的函數運行然後返 回其返回值。

.代碼 

1. function makeFunc() {  
2.     var args = Array.prototype.slice.call(arguments);  
3.     var func = args.shift();  
4.     return function() {  
5.       return func.apply(null,   args.concat(Array.prototype.slice.call(arguments)));};  
6. }  

 

 

 

    arguments 有一個不可枚舉的屬性callee（不能用for in讀出，可用HasOwnProterty（name）來判斷），arguments.callee為正被執行的 Function 對象。slice時己把當前函數指標copy了過去，所以args的第一個元素為函數類型

    makeFunc 的第一個參數指定需要調用的函數名稱（是的，在這個簡單的例子中沒有錯誤檢查），擷取以後從 args 中刪除。makeFunc 返回一個匿名函數，它使用函數對象的（Function Object）apply 方法調用指定的函數。

    apply 方法的第一個參數指定了範圍，基本上的範圍是被調用的函數。不過這樣在這個例子中看起來會有點複雜，所以我們將其設定成 null ；其第二個參數是個數組，它指定了其調用函數的參數。makeFunc 轉換其自身的 arguments 並串連匿名函數的 arguments，然後傳遞到被調用的函數。

   有種情況就是總是要有個輸出的模板是相同的，為了節省每次是使用上面提到的 format 函數並指定重複的參數，我們可以使用 makeFunc 這個工具。它將返回一個匿名函數，並自動產生已經指定模板後的內容： 可以500%提高開發效率的前端UI架構！

.代碼 

1. var majorTom = makeFunc(format, "This is Major Tom to ground control. I'm %1.");  

 

 

你可以像這樣重複指定 majorTom 函數：

.代碼 

1. majorTom("stepping through the door");  
2. majorTom("floating in a most peculiar way");  

 

 

那麼當每次調用 majorTom 函數時，它都會使用第一個指定的參數填寫已經指定的模板。例如上述的代碼返回：

"This is Major Tom to ground control. I'm stepping through the door."
"This is Major Tom to ground control. I'm floating in a most peculiar way."

 

自引用的函數
   您可能會認為這很酷，先別急著高興，後面還有個更大的驚喜。它（arguments）還有個其他非常有用的屬性：callee 。arguments.callee 包含了當前調用函數的被引用對象。那麼我們如何使用這玩意做些的事情？arguments.callee 是個非常有用的調用自身的匿名函數。

   下面有個名為 repeat 的函數，它的參數需要個函數引用和兩個數字。第一個數字表示啟動並執行次數，而第二個函數定義啟動並執行間隔時間（毫秒為單位）。下面是相關的代碼： 可以500%提高開發效率的前端UI架構！

.代碼 

1. function repeat(fn, times, delay) {  
2.     return function() {  
3.         if (times-- > 0) {  
4.             fn.apply(null, arguments);  
5.             var args = Array.prototype.slice.call(arguments);  
6.             var self = arguments.callee;  
7.             setTimeout(function(){self.apply(null,args)}, delay);  
8.         }  
9.    };  
10. }  

 

 

   repeat 函數使用 arguments.callee 獲得當前引用，儲存到 self 變數後，返回個匿名函數重新運行原本被調用的函數。最後使用 setTimeout 以及配合個匿名函數實現順延強制。

   作為個簡單的說明，比如會在通常的指令碼中，編寫下面的提供個字串並彈出個警告框的簡單函數：

.代碼 

1. function comms(s) {  
2.     alert(s);  
3. }  

 

 

   好了，後來我改變了我的想法。我想編寫個“特殊版本”的函數，它會重複三次運行每次間隔兩秒。那麼使用我的 repeat 函數，就可以像這樣做到：

.代碼 

1. var somethingWrong = repeat(comms, 3, 2000);  
2. somethingWrong("Can you hear me, major tom?");  

 

 

結果就猶如預期的那樣，彈出了三次警告框每次延時兩秒。可以500%提高開發效率的前端UI架構！

最後，arguments 即便不會經常被用到，甚至顯得有些詭異，但是它上述的那些驚豔的功能（不僅僅是這些！）值得你去瞭解它。

javascript 函數作為參數名

簡單的舉個例子。測試環境 win7+ie8+chrome
<script type="text/javascript">
function Add(x,y) {
alert(x + y);
}
function Sub(x,y) {
alert(x - y);
}
function CallFunc(Fun,x,y) {
if (Fun && (typeof Fun == "function")) {
if (x && y && (typeof x == "number") && (typeof y == "number")) {
Fun(x,y);
}else {
console.log(typeof x);
}

}else {

}
}

CallFunc(Sub,5,3);
</script>
 
javascript js 函數調用 參數

oTextArea.onkeydown = handle 的意思是此事件引用了名為handle的函數，如果加（），那麼意思就變了，變成此事件擷取handle函數的傳回值，handle函數會在事件未被觸發時就被執行。建議你有空瞭解一下JS方面的書籍，可以長很多見識。