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);

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

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

命名函数表达式

我们可以将命名函数定义为函数表达式 –


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

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

立即调用的函数表达式

函数表达式可以用作 IIFE（立即调用的函数表达式），一旦定义就会被调用。


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

例子

示例：函数表达式

在下面的示例中，我们将函数 expression 存储在 'sum' 变量中。函数 expression 将两个数字相加，并在输出中打印。

最后，我们使用 '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

示例：函数 expression 中的 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

示例：使用函数表达式作为值

下面的示例演示如何使用函数 expression 作为值。在这里，我们将函数表达式存储在 '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' 变量中。

我们在父函数 expression 中调用 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
打印本页
上一页
下一页