函数表达式允许我们在表达式中定义 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)
函数表达式可以作为立即调用的函数表达式(Immediately Invoked Function Expression)使用,即在定义后立即被调用。
(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
语句,就像在函数定义中一样。
在下面的代码中,函数返回两个数字的乘积值。
<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