深入理解：全面掌握JavaScript 函數定義方式

1.函數的定義

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

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

清單 1.函數定義

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

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

清單 2

2. Function()構造函數

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

var myfunc = new Function (‘x’, ‘y’, ‘alert(x+y)’);

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

清單 3.

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

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

3. 函數直接量

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

清單 4.

注意：調用時得用定義的變數名，如f(4),而不能fact(4).

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

清單 5.

4.區別

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

清單 6.

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

清單 7.

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

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