JavaScript - 函式表示式

函式表示式允許我們在表示式中定義 JavaScript 函式。JavaScript 函式可以使用函式宣告或函式表示式來定義。它們之間的主要區別在於函式名稱。在函式表示式中可以省略函式名稱。這有助於在 JavaScript 中建立匿名函式。我們可以將函式表示式儲存在變數中，並使用該變數來呼叫函式表示式。

語法

JavaScript 中函式表示式的語法如下：

function (parameter-list) {
    statements
};

我們可以使用變數來儲存 JavaScript 函式表示式：

const varName = function (parameter-list) {
    statements
};

這裡，函式表示式儲存在變數 varName 中。將函式賦值給變數後，可以使用該變數來呼叫函式。讓我們看下面的示例：

const sum = function (x, y) {
     return x + y;
};
let z = sum(2, 3);

在上面的程式碼中，函式表示式被賦值給變數 sum。變數 sum 被用作函式來呼叫函式。

請注意，在 function 關鍵字之後沒有名稱。函式表示式允許定義匿名函式。

命名函式表示式

我們可以將命名函式定義為函式表示式：

const sum = function addNumbers(x, y) {
    return x + y;
};
let z = sum(2, 3);

但是，我們需要僅使用變數來呼叫函式。我們不能使用函式名稱來呼叫函式。

立即執行函式表示式

函式表示式可以用作 IIFE（立即執行函式表示式），它在定義後立即被呼叫。

(function greet() {
    alert("Hello World");
})();

示例

示例：函式表示式

在下面的示例中，我們將函式表示式儲存在 'sum' 變數中。函式表示式將兩個數字相加並在輸出中列印。

最後，我們使用 'sum' 變數來呼叫儲存在其中的函式表示式。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const sum = function () {
         let a = 10;
         let b = 20;
         document.getElementById("output").innerHTML = 
		 "The sum of " + a + " and " + b + " is " + (a + b);
      }
      sum();
   </script>
</body>
</html>

輸出

The sum of 10 and 20 is 30

示例：函式表示式中的 return 語句

以下程式碼演示瞭如何在函式表示式中使用 'return' 語句。您可以在函式表示式內部使用 return 語句，就像在函式定義中一樣。

在下面的程式碼中，函式返回兩個數字的乘積。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const mul = function (a, b) {
         return a * b;
      }
      let result = mul(4, 5);
      document.getElementById("output").innerHTML = 
	  "The returned value from the function is " + result;
    </script>
</body>
</html>

輸出

The returned value from the function is 20

示例：使用函式表示式作為值

以下示例演示瞭如何使用函式表示式作為值。這裡，我們將函式表示式儲存在 'num' 變數中，並將其返回值乘以 3。

您可以從函式表示式中返回隨機數，並將函式表示式用作值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const num = function () {
         return 2;
      }
      let result = num() * 3;
      document.getElementById("output").innerHTML = 
	  "The multiplication value is " + result;
    </script>
</body>
</html>

輸出

The multiplication value is 6

示例：巢狀函式表示式

以下示例演示瞭如何使用巢狀函式表示式。我們定義了函式表示式並將其儲存在 'num' 變數中。在函式表示式體中，我們定義了另一個函式表示式並將其儲存在 'decimal' 變數中。

我們在父函式表示式中呼叫 decimal() 函式表示式並返回其值。當我們呼叫 num() 函式表示式時，它返回 decimal() 函式表示式返回的值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const num = function () {
         const decimal = function () {
            return 5;
         }
         return decimal();
      }
      document.getElementById("output").innerHTML = 
	  "The returned value from the function is " + num();
   </script>
</body>
</html>

輸出

The returned value from the function is 5

列印頁面