函數的定義

通俗的來講，函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼快。它是 JavaScript 語言一個即重要又復雜的組成部分，任何一個 JavaScript 框架，如 Dojo、jQuery 等都是有成百上千個函數組成的。函數的使用不僅提高了代碼本身的可讀性，也為它的擴展提供了可能，同時還降低了維護成本，加快 web 項目的開放進度；尤其是在多人參與的敏捷開發中。

通常函數的定義是通過 function 語句實現的:

清單 1.函數定義

1 2 3

function funcname([arg1[,arg2……]]){ ??statements }

funcname 是要定義的函數名，是一個標識符，而不是字符串或者表達式；緊跟函數名后面的是用括號括起來的參數列表，參數之間用逗號隔開；最后，也是這個函數的核心部分：函數體，它是由一行或者多行代碼組成并且是用大括號括起來的。

函數定義描述的是一個靜態的程序結構，當 JavaScript 解析器遇到一個函數定義時，它就被解析并存儲構成函數體的語句，然后定義一個和該函數名同名的全局或者某個對象屬性來保存。當該函數被調用時，里面的函數體才真正的被執行。如：

清單 2

1 2 3 4 5

alert(typeof f)//顯示 function，而不是 undefined function f(x，y){ ??alert(x+y); } f(2, 3) //顯示 5

函數定義方式之 Function()構造函數

定義一個函數，最為普遍的是直接使用 function 關鍵字來定義，又稱函數聲明式(function declaration),如上面定義的 f 函數，但是 function 語句并非是定義函數的惟一方法。在 ECMAScript v1 和 JavaScript v1.1 中，還可以使用 Function () 構造函數和 new 運算符動態地定義函數，如下：

1	var myfunc = new Function ('x', 'y', 'alert(x+y)');

這行代碼創建了一個新函數，該函數和下面使用 function 方法定義的函數是等價的:

清單 3.

1 2 3

function myfunction(x, y){ ??alert(x+y); }

Function () 定義中，前面兩個是參數，參數可以是任意多個字符串；第三個是函數體，可以包含任何 JavaScript 語句，語句之間用分號隔開。如果沒有參數，傳一個函數體即可。由于傳遞給 Function () 函數中，沒有一個字符串是用來聲明函數名的，所以它是一個匿名函數。

使用 Function()構造函數來定義函數允許我們動態的來定義和編譯一個函數，而不是限定在 function 預編譯的函數體中。但同時也會帶來負面影響，因為每次調用這個函數都要對它進行編譯，對性能有一定的影響，尤其是在循環體中。

函數定義方式之函數直接量

函數定義的第三種方式是函數直接量，ECMAScript v3 定義了函數直接量，JavaScript 1.2 實現了它。函數直接量是一個表達式，它即可以定義一個匿名函數，也可以定義一個帶函數名的函數:

清單 4.

1 2 3 4 5 6 7 8 9 10

var sum = function(a, b){ ??return a+b; } var f = function fact(x){ ??if(x<= 1){ ????return 1; ??}else{ return x * fact(x-1); ??} }

函數直接量和使用 Function()構造函數來創建函數的方法非常相似，因為兩種方法都是通過 JavaScript 的表達式創建的，而不是由語句創建的；所以使用他們的方式也更靈活，尤其是那些只使用一次，而且不需要命名的函數。比如把它傳遞給其他的函數:

清單 5.

1 2 3 4 5 6

var desc = function(a, b){ ??return a<b; } var a = [2,1,4,3,6,7]; a.sort(desc);// 把desc函數當作參數傳給數組的sort方法 alert(a.join(','))// 輸出7,6,4,3,2,1

區別

三種方式的區別，可以從作用域、效率以及加載順序來區分。首先，從作用域上來說，函數聲明式和函數直接量使用的是局部變量，而 Function()構造函數卻是全局變量:

清單 6.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var y = 'global'; function a(){ ??var y = 'local a'; ??return y; } alert(a());//顯示'local a' var b = function(){ ??var y = 'local b'; return y; } alert(b()) //顯示'local b' function c(){ ??var y = 'local c'; ??return new Function('return y'); } alert(c()());//顯示'global'，因為Function()返回的是全局變量y，而不是函數體內的局部變量。

其次是執行效率上來說，Function()構造函數的效率要低于其他兩種方式，尤其是在循環體中，因為構造函數每執行一次都要重新編譯，并且生成新的函數對象:

清單 7.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var start = new Date().getTime(); for(var i=0; i<10000000; i++){ ??var f = new Function(‘a’, ‘b’, ‘return a+b’); ??f(i, i+1); } var end = new Date().getTime(); alert(end-start);//結果顯示~11s ? start = new Date().getTime(); var f = function(a, b){ ??return a+b; } for(var i=0; i<10000000; i++){ ??f(i, i+1); } end = new Date().getTime(); alert(end-start);//結果顯示~7s

由此可見，在循環體中，函數直接量的執行效率是 Function()構造函數的 0.6 倍。所以在 Web 開發中，為了加快網頁加載速度，提高用戶體驗，我們不建議選擇 Function ()構造函數方式來定義函數。

最后是加載順序，function 方式(即函數聲明式)是在 JavaScript 編譯的時候就加載到作用域中,而其他兩種方式則是在代碼執行的時候加載，如果在定義之前調用它，則會返回?undefined：

清單 8.

1 2 3 4 5 6 7 8 9 10 11 12

<code>alert (typeof f)//顯示 function alert (typeof c)//顯示 undefined,因為 c 還沒有定義 alert (typeof d)//顯示 undefined,因為 d 還沒有定義 function f(){ ??return true } var c = function(){ ??return true; } alert(typeof c);//顯示 function,上面已經定義,所以不是 undefined var d = new Function(‘return true’) alert(typeof d);//顯示 function，上面已經定義,所以不是 undefined</code>

相關主題

??查看?HTML5 專題，了解更多和 HTML5 相關的知識和動向。

• 訪問?W3School 函數概述，了解詳細的 JavaScript 函數定義的基本概念以及函數的基本組成部分。
• 訪問?Function 對象定義，了解使用 Function 方式定義 JavaScript 函數。
• developerWorks Web development 專區：通過專門關于 Web 技術的文章和教程，擴展您在網站開發方面的技能。
• developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
• developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過?Web 2.0 新手入門?欄目，迅速了解 Web 2.0 的相關概念。

from:?https://www.ibm.com/developerworks/cn/web/1406_dengxb_jsfunction/index.html?

總結

以上是生活随笔為你收集整理的JavaScript 函数定义方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。