JavaScript 函数表达式

29 Mar 2025 | 7 分钟阅读

JavaScript 中的函数表达式允许在任何表达式内部定义一个带参数的函数。函数声明和函数表达式之间的主要区别在于，JavaScript 函数表达式直接使用函数和变量名来调用函数。

当定义一个函数表达式时，IIFE（立即调用的函数表达式）会在 JavaScript 中紧接着函数执行。函数表达式必须保存在一个变量中，然后通过该变量名来检索。ES6 引入的箭头函数使得声明函数表达式更加容易。

JavaScript 函数表达式的重要元素

以下是 JavaScript 函数表达式的主要元素，并进行详细讨论：

Keyword: `function` 关键字出现在每个 JavaScript 函数表达式之前。它是函数名的主要且必不可少的参数。
Parameters: 参数也称为函数表达式的实参。它们是函数用来执行操作的值。
Operations: 函数使用参数执行操作，通常称为计算。
Return value: 在所有操作结束时返回给调用语句的值称为返回值。

函数表达式和函数声明的区别

Hoisting（提升）: 当一个函数声明被提升时，它的定义在执行时会被推送到作用域的顶部。这允许在代码定义它之前就能使用该函数。另一方面，函数表达式不会被提升。
Naming（命名）: 函数表达式可以命名，也可以不命名，但函数声明必须始终有一个名称。
Use（用途）: 由于函数表达式的特性，函数可以被实现为 IIFE（立即调用的函数表达式）。函数表达式可以在循环或条件语句中使用，但函数声明则不行。

语法

以下语法展示了在 JavaScript 中调用函数表达式的不同方式。

函数声明语法

函数表达式语法（匿名）

选择函数声明还是函数表达式，主要取决于具体的编码情况和需求。

JavaScript 匿名函数表达式

一个没有函数名来声明或定义为函数表达式的函数称为匿名函数表达式。在 JavaScript 中，将一个函数赋值给一个变量就产生了一个函数表达式。匿名函数位于赋值运算符的右侧，并有一个通用的名称或字母。因此，当一个没有名称的函数被应用于一个变量时，就会创建一个匿名函数表达式。

JavaScript 匿名函数表达式的应用

在 JavaScript 代码中使用匿名函数表达式有许多优点。这些优点包括但不限于：

代码简化： 使用匿名函数可以使代码更简洁，因为您不必为编写的每个函数都想一个名字。
无函数提升： 与命名函数不同，匿名函数表达式不会被提升。因此，必须在使用函数之前定义它。
使回调函数更易理解： 匿名函数表达式是处理回调函数（即传递给另一个函数的函数）的首选工具。
节省内存： 您可以通过手动创建对匿名函数的引用而不是让解释器为您完成，将其赋值给一个变量，从而消除不必要的引用并节省内存。

函数表达式语法（匿名）

以下语法用于匿名定义函数表达式。

或

示例

以下示例展示了没有函数名的函数表达式。我们可以使用 `let` 和 `var` 关键字创建变量来表示函数。我们在变量名右侧使用函数。

示例 1

以下示例用于匿名操作函数表达式。在此，函数表达式使用 `let` 关键字变量进行函数声明。

 
function expression uses the "let" keyword variable for the function declaration.
<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Anonymous Function Expression </h4>
<p> We can create and declare the function without the function name. We can use the let variable for the function expression. </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
//create the variable with the 'let' keyword for a function expression
let cal_Substraction = function (x, y) {
	let c = x - y;
	return c;
}
document.getElementById("data_view").innerHTML = "Subtraction value: " + cal_Substraction(10, 4);
let cal_add = function (x, y) {
	let c = x + y;
	return c;
}
document.getElementById("data_view1").innerHTML = "Addition value: " + cal_add(10, 4);
</script>
</body>
</html>   

输出

输出显示了匿名方式的函数表达式及其操作。

示例 2

以下示例用于匿名操作函数表达式。在此，函数表达式使用 `var` 关键字变量进行函数声明。

 
<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Anonymous Function Expression </h4>
<p> We can create and declare the function without the function name. <br>
we can use the "var" variable for the function expression. </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
//create the variable with the 'var' keyword for a function expression
var cal_Substraction = function (x, y) {
let c = x * y;
return c;
}
document.getElementById("data_view").innerHTML = "Multiplication value: " + cal_Substraction(10, 4);
var cal_add = function (x, y) {
let c = x / y;
return c;
}
document.getElementById("data_view1").innerHTML = "Division value: " + cal_add(10, 4);
</script>
</body>
</html>   

输出

输出显示了匿名方式的函数表达式及其操作。

命名函数表达式

函数表达式使用变量名和函数名在 JavaScript 中声明函数。在脚本标签中，我们可以在右侧使用函数名，在左侧使用变量名。

函数表达式语法（匿名）

以下语法用于定义带函数名的函数表达式。

 
let variableName = function functionName(x, y) 
{ statements... return (z) };   

示例

以下示例用于操作带函数名的函数表达式。在此，函数表达式在 `function` 关键字之后使用变量名和函数名进行函数声明。

 
<!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Function Expression with function name </h4>
<p> We can create and declare the function with the function name.  </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
var Square_operation = function square_fun(x) {
let c = x * x;
return c;
}
document.getElementById("data_view").innerHTML = "Square value: " + Square_operation(12);
var Cube_operation = function cube_fun(x) {
let c = x * x * x;
return c;
}
document.getElementById("data_view1").innerHTML = "Cube value: " + Cube_operation(12);
</script>
</body>
</html>   

输出

输出显示了带函数名的函数表达式及其操作。

箭头函数函数表达式

函数表达式使用箭头函数和变量名声明。参数在括号中使用，但 JavaScript 操作语句不使用 `function` 关键字和函数名。箭头函数使用箭头符号来表示函数。

语法

以下语法显示了带箭头符号的函数表达式。

示例

以下示例用于操作带箭头函数的函数表达式。在此，函数表达式使用变量和箭头函数进行函数声明。

 
 <!DOCTYPE html>
<html>
<head>
<title> Function expression in javascript </title>
</head>
<body style = "background-color:beige;">
<h2> Function expression in javascript </h2>
<h4> JavaScript Function Expression with arrow function </h4>
<p> We can create and declare the function with the arrow function.  </p>
<b id = "data_view"> </b>
<br>
<b id = "data_view1"> </b>
<script>
var mul_operation = (x, y, z) =>{
	let c = x * y * z;
	return c;
}
document.getElementById("data_view").innerHTML = "Multiplication value: " +mul_operation(12, 10, 2);
var math_operation = (x, y, z) =>{
	let c = x + y - z;
	return c;
}
document.getElementById("data_view1").innerHTML = "Mathematical operational value: " + math_operation(12, 10, 5);
</script>
</body>
</html>  

输出

输出显示了带箭头函数的函数表达式及其操作。

支持的浏览器

以下 Web 浏览器及其版本支持函数表达式。

Chrome 1 及更高版本
Edge 12 及更高版本
Firefox 1 及更高版本
Internet Explorer 3 及更高版本
Opera 3 及更高版本
Safari 1 及更高版本

结论

函数表达式用于根据用户的需求创建、声明和操作函数。开发者通常使用函数表达式直接或不带任何 HTML/JavaScript 事件来操作函数。

下一主题Gcd-in-javascript

JavaScript 函数表达式