JavaScript 函數定義

JavaScript 函數是通過 function 關鍵詞定義的。

您可以使用函數聲明或函數表達式。

函數聲明

在本教程中稍早之前，您學到了通過如下語法聲明函數：

function functionName(parameters) {
   要執行的代碼
}

被聲明的函數不會直接執行。它們被“保存供稍后使用”，將在稍后執行，當它們被調用時。

實例

function myFunction(a, b) {
     return a * b;
}

親自試一試

分號用于分隔可執行的 JavaScript 語句。

由于函數聲明不是可執行的語句，以分號結尾并不常見。

函數表達式

JavaScript 函數也可以使用表達式來定義。

函數表達式可以在變量中存儲：

實例

var x = function (a, b) {return a * b};

親自試一試

在變量中保存函數表達式之后，此變量可用作函數：

實例

var x = function (a, b) {return a * b};
var z = x(4, 3);

親自試一試

上面的函數實際上是一個匿名函數（沒有名稱的函數）。

存放在變量中的函數不需要函數名。他們總是使用變量名調用。

上面的函數使用分號結尾，因為它是可執行語句的一部分。

Function() 構造器

正如您在之前的例子中看到的，JavaScript 函數是通過 function 關鍵詞定義的。

函數也可以通過名為 Function() 的內建 JavaScript 函數構造器來定義。

實例

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

親自試一試

您實際上無需使用函數構造器。上面的例子這么寫也是一樣的：

實例

var myFunction = function (a, b) {return a * b};
var x = myFunction(4, 3);

親自試一試

大多數情況下，您可以避免在 JavaScript 中使用 new 關鍵詞。

函數提升

在本教程中稍早前，您已經學到了“提升”（hoisting）。

Hoisting 是 JavaScript 將聲明移動到當前作用域頂端的默認行為。

Hoisting 應用于變量聲明和函數聲明。

正因如此，JavaScript 函數能夠在聲明之前被調用：

myFunction(5);
 function myFunction(y) {
     return y * y;
}

使用表達式定義的函數不會被提升。

自調用函數

函數表達式可以作為“自調用”。

自調用表達式是自動被調用（開始）的，在不進行調用的情況下。

函數表達式會自動執行，假如表達式后面跟著 ()。

您無法對函數聲明進行自調用。

您需要在函數周圍添加括號，以指示它是一個函數表達式：

實例

(function () {
    var x = "Hello!!";      // 我會調用我自己
})();

親自試一試

上面的函數實際上是一個匿名的自調用函數（沒有名稱的函數）。

函數可用作值

JavaScript 函數可被用作值：

實例

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

親自試一試

JavaScript 函數可用在表達式中：

實例

function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;

親自試一試

函數是對象

JavaScript 中的 typeof 運算符會為函數返回 "function"。

但是最好是把 JavaScript 函數描述為對象。

JavaScript 函數都有屬性和方法。

arguments.length 會返回函數被調用時收到的參數數目：

實例

function myFunction(a, b) {
    return arguments.length;
}

親自試一試

toString() 方法以字符串返回函數：

實例

function myFunction(a, b) {
    return a * b;
}
var txt = myFunction.toString();

親自試一試

定義為對象屬性的函數，被稱為對象的方法。

為創建新對象而設計的函數，被稱為對象構造函數（對象構造器）。

箭頭函數

箭頭函數允許使用簡短的語法來編寫函數表達式。

您不需要 function 關鍵字、return 關鍵字和花括號。

實例

// ES5
var x = function(x, y) {
  return x * y;
}
// ES6
const x = (x, y) => x * y;

親自試一試

箭頭函數沒有自己的 this。它們不適合定義對象方法。

箭頭函數未被提升。它們必須在使用前進行定義。

使用 const 比使用 var 更安全，因為函數表達式始終是常量值。

如果函數是單個語句，則只能省略 return 關鍵字和大括號。因此，保留它們可能是一個好習慣：

實例

const x = (x, y) => { return x * y };

親自試一試

IE11 或更早的版本不支持箭頭函數。