JS定義函數(function關鍵字)

2020-07-16 10:05:02
在 JavaScript 中定義函數的方法有 3 種,即使用 function 語句、使用 Function() 建構函式和定義函數直接量。

宣告函數

在 JavaScript 中可以使用 function 語句宣告函數。具體用法如下:
function funName([args]) {
    statements
}
funName 是函數名,與變數名一樣必須是 JavaScript 合法的識別符號。在函數名之後是一個由一個小括號包含的參數列,引數之間以逗號分隔。引數是可選的,沒有數量限制。

作為識別符號,引數僅在函數體內被存取,引數是函數作用域的私有成員。呼叫函數時,通過為函數傳遞值,然後使用引數獲取外部傳入的值,並在函數體內干預函數的執行。

在小括號之後是一個大括號,大括號內包含的語句就是函數體結構的主要內容。在函數體重,大括號是必不可少的,缺少大括號,JavaScript 將會丟擲語法錯誤。

範例

function 語句必須包含函數名、小括號和大括號,其他程式碼都可省略,因此最簡單的函數體是一個空函數。

function funName() {}  //空函數

如果使用匿名函數,則可以省略函數名。

function () {}  //匿名空函數


var 語句和 function 語句都是宣告語句,它們宣告的變數和函數都在 JavaScript 預編譯時被解析,也被稱為變數提升和函數提升。在預編譯期,JavaScript 引擎會為每個 function 建立上下文,定義變數物件,同時把函數內所有形參、私有變數、巢狀函數作為屬性註冊到變數物件上。

Function() 建構函式

使用 Function() 建構函式可以快速生成函數。具體用法如下:
var funName = new Function(p1, p2, ..., pn, body);
Function() 的引數型別都是字串,p1~pn 表示所建立函數的引數名稱列表,body 表示所建立函數的函數結構體語句,在 body 語句之間以分號分隔。

範例1

可以省略所有引數,僅傳遞一個字串,用來表示函數體。
var f = new Function ("a", "b", "return a+b");  //通過建構函式來克隆函數結構
在上面程式碼中,f 就是所建立函數的名稱。同樣是定義函數,使用 function 語句可以設計相同結構的函數。
function f(a, b) {  //使用function語句定義函數結構
    return a + b;
}

範例2

使用 Function() 建構函式可以不指定任何引數,建立一個空函數結構體。
var f = new Function();  //定義空函數

範例3

在 Function() 建構函式引數中,p1~pn 是引數名稱的列表,即 p1 不僅能代表一個引數,還可以是一個逗號隔開的參數列。下面的定義方法是等價的。
var f = new Function("a", "b", "c", "return a+b+c");
var f = new Function("a, b, c", "return a+b+c");
var f = new Function("a,b", "c", "return a+b+c");
使用 Function() 建構函式不是很常用,因為一個函數體通常會包括很多程式碼,如果將這些程式碼以一行字串的形式進行傳遞,程式碼的可讀性會很差。

使用 Function() 建構函式可以動態的建立函數,它不會把使用者限制在 function 語句預宣告的函數體中。使用 Function() 建構函式能夠把函數當做表示式來使用,而不是當做一個結構,因此使用起來會更靈活。其缺點就是,Function() 建構函式在執行期被編譯,執行效率非常低,一般不推薦使用。

匿名函數(函數直接量)

函數直接量也稱為匿名函數,即函數沒有函數名,僅包含 function 關鍵字、引數和函數體。具體用法如下:
function ([args]) {
    statements
}

範例1

下面程式碼定義一個函數直接量。
function (a, b) {  //函數直接量
    return a + b;
}
在上面程式碼中,函數直接量與使用 function 語句定義函數結構基本相同,它們的結構都是固定的。但是函數直接量沒有指定函數名,而是直接利用關鍵字 function 來表示函數的結構,這種函數也被稱為匿名函數。

範例2

匿名函數就是一個表示式,即函數表示式,而不是函數結構的語句。下面把匿名函數作為一個值賦值給變數 f。
//把函數作為一個值直接賦值給變數 f
var f = function (a, b) {
    return a + b;
};
當把函數結構作為一個值賦值給變數之後,變數就可以作為函數被呼叫,此時變數就指向那個匿名函數。
console.log(f(1,2));  //返回值3

範例3

匿名函數作為值,可以參與更複雜的表示式運算。針對上面範例可以使用以下程式碼完成函數定義和呼叫一體化操作。
console.log(  //把函數作為一個運算元進行呼叫
    (function (a,b) {
        return a + b;
    })(1, 2));  //返回數值3

定義巢狀函數

JavaScript 允許函數相互巢狀,因此可以定義複雜的巢狀結構函數。

範例1

使用 function 語句宣告兩個相互巢狀的函數體結構。
function f(x,y) {  //外層函數
    function e(a, b) {  //內層函數
        return a * b;
    }
    return x + y;
}

範例2

巢狀的函數只能在函數體內可見,函數外不允許直接存取、呼叫。
function f(x,y) {
    function e(a,b) {
        return a * b;
    }
    return e(3,6) + y;  //內層函數參與表示式運算有效
    console.log(e(3,6));  //無效的呼叫
}
console.log(f(3,6));  //呼叫外層函數