Javascript 简明教程

JavaScript - Function Expressions

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

The function expression allows us to define a JavaScript function in an expression. JavaScript functions are defined using a function declaration or a function expression. The main difference between them is the function name. The function name can be omitted in function expressions. This helps to create anonymous functions in JavaScript. We can store the function expression in the variable and use that variable to invoke the function expression.

Syntax

JavaScript 中函数表达式的语法如下——

The syntax of function expression in JavaScript is as follows –

function (parameter-list) {
    statements
};

我们可以使用变量存储 JavaScript 函数表达式——

We can use a variable to store a JavaScript function expression –

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

此函数表达式存储在变量 varName 中。当函数分配给变量后，该变量用于调用该函数。让我们看看下面的示例——

Here the function expression is stored in the variable, varName. Once the function is assigned to a variable, the variable is used to invoke the function. Let’s look at the example below –

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

在上面的代码中，函数表达式分配给变量 sum。变量 sum 用作调用函数的函数。

In the above code the function expression is assigned to the variable sum. The variable sum is used as function to invoke the function.

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

Please note there is no name after the function keyword. The function expression allows to define anonymous function.

Named Function Expression

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

We can define a named function as a function expression –

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

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

But we need to invoke the function using the variable only. We can’t use the function name to invoke the function.

Immediately Invoked Function Expression

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

A function expression can be used as the IIFE (immediately invoked function expression) which is invoked as soon as defined.

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

Examples

Example: Function Expression

在下面的示例中，我们将函数表达式存储在“sum”变量中。函数表达式添加两个数字并在输出中打印。

In the example below, we stored the function expression in the ‘sum’ variable. The function expression adds two numbers and prints in the output.

最后，我们使用“sum”变量调用存储在其中的函数表达式。

At last, we used the ‘sum’ variable to invoke the function expression stored in that.

<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 语句。

The below code demonstrates the using the ‘return’ statement in the function expression. You can use the return statement inside the function expression as you use it in the function definition.

在下面的代码中，该函数返回两个数字的乘法值。

In the below code, the function returns the multiplication value of two numbers.

<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。

The below example demonstrates using the function expression as a value. Here, we stored the function expression in the ‘num’ variable and multiplied its returned value by 3.

你可以从函数表达式中返回随机数并将函数表达式用作值。

You may return the random number from the function expression and use the function expression as a value.

<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”变量中。

The example below demonstrates using the nested function expression. We defined the function expression and stored it in the ‘num’ variable. In the function expression body, we defined another function expression and stored it in the ‘decimal’ variable.

我们调用父函数表达式中的 decimal() 函数表达式并返回它的值。当我们调用 num() 函数表达式时，它返回 decimal() 函数表达式返回的值。

We call the decimal() function expression in the parent function expression and return its value. When we call the num() function expression, it returns the value returned by the decimal() function expression.

<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