Javascript 简明教程

JavaScript - Function Expressions

function expression 允许我们在表达式中定义 JavaScript 函数。JavaScript 函数是使用函数声明或函数表达式来定义的。它们之间的主要区别在于函数名称。函数表达式中可以省略函数名称。这有助于在 JavaScript 中创建匿名函数。我们可以将函数表达式存储在变量中并将该变量用于调用函数表达式。

Syntax

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 用作调用函数的函数。

请注意，函数关键字后面没有名称。函数表达式允许定义匿名函数。

Named Function Expression

我们可以将具名函数定义为函数表达式——

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

但我们需要仅使用变量调用该函数。我们不能使用函数名称来调用函数。

Immediately Invoked Function Expression

可以使用函数表达式作为 IIFE（立即调用函数表达式），它在定义后立即被调用。

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

Examples

Example: Function Expression

在下面的示例中，我们将函数表达式存储在“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

Example: The return statement in function expression

下面的代码演示了在函数表达式中使用“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

Example: Using the function expression as a value

下面的示例演示了将函数表达式用作值。在这里，我们将函数表达式存储在“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

Example: Nested function expression

下面的示例演示了使用嵌套函数表达式。我们定义了函数表达式并将其存储在“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