编辑“︁JavaScript函数表达式”︁

{{DISPLAYTITLE:JavaScript函数表达式}}

'''JavaScript函数表达式'''是JavaScript中定义函数的一种方式，它允许将函数作为表达式的一部分赋值给变量或属性。与[[函数声明]]不同，函数表达式不会提升（hoist），并且可以创建匿名函数或具名函数。理解函数表达式对于掌握JavaScript的函数式编程特性至关重要。

== 简介 ==
在JavaScript中，函数表达式是一种将函数定义为表达式的方式。它可以是：
* '''匿名函数表达式'''：没有名称的函数，通常赋值给变量。
* '''具名函数表达式'''（Named Function Expression, NFE）：带有名称的函数，有助于调试和递归调用。

函数表达式在运行时求值，因此必须在定义后才能调用。

== 基本语法 ==
函数表达式的基本语法如下：
<syntaxhighlight lang="javascript">
// 匿名函数表达式
const myFunction = function(parameters) {
    // 函数体
};

// 具名函数表达式
const myNamedFunction = function functionName(parameters) {
    // 函数体
};
</syntaxhighlight>

=== 示例：匿名函数表达式 ===
<syntaxhighlight lang="javascript">
const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet("Alice")); // 输出: "Hello, Alice!"
</syntaxhighlight>

=== 示例：具名函数表达式 ===
<syntaxhighlight lang="javascript">
const factorial = function computeFactorial(n) {
    if (n <= 1) return 1;
    return n * computeFactorial(n - 1); // 递归调用
};

console.log(factorial(5)); // 输出: 120
</syntaxhighlight>

== 函数表达式 vs 函数声明 ==
函数表达式和函数声明的主要区别在于提升（hoisting）和定义时机：

{| class="wikitable"
|-
! 特性 !! 函数表达式 !! 函数声明
|-
| 提升 || 否 || 是
|-
| 定义时机 || 运行时求值 || 解析时定义
|-
| 匿名支持 || 支持 || 不支持
|}

== 实际应用场景 ==
函数表达式常用于以下场景：

=== 1. 回调函数 ===
<syntaxhighlight lang="javascript">
const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return num * 2;
});

console.log(doubled); // 输出: [2, 4, 6]
</syntaxhighlight>

=== 2. IIFE（立即调用函数表达式） ===
<syntaxhighlight lang="javascript">
(function() {
    console.log("This runs immediately!");
})();
</syntaxhighlight>

=== 3. 闭包 ===
<syntaxhighlight lang="javascript">
function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2
</syntaxhighlight>

== 高级概念 ==
=== 箭头函数表达式 ===
ES6引入的箭头函数是函数表达式的简写形式：
<syntaxhighlight lang="javascript">
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5
</syntaxhighlight>

=== 函数表达式的类型 ===
在TypeScript中，可以明确指定函数表达式的类型：
<syntaxhighlight lang="typescript">
const greet: (name: string) => string = function(name: string) {
    return `Hello, ${name}!`;
};
</syntaxhighlight>

== 性能考虑 ==
函数表达式与函数声明在性能上没有显著差异，但具名函数表达式有助于调试，因为堆栈跟踪会显示函数名称。

== 常见错误 ==
1. '''在定义前调用'''：
<syntaxhighlight lang="javascript">
console.log(myFunc()); // 错误: myFunc未定义
const myFunc = function() { return "Hello"; };
</syntaxhighlight>

2. '''混淆具名函数表达式的名称作用域'''：
<syntaxhighlight lang="javascript">
const foo = function bar() {
    console.log(typeof bar); // 输出: "function"（仅在函数内部可用）
};
console.log(typeof bar); // 输出: "undefined"
</syntaxhighlight>

== 总结 ==
JavaScript函数表达式是灵活定义函数的重要方式，特别适合：
* 需要将函数作为值传递的场景
* 创建闭包
* 实现IIFE模式
* 编写箭头函数

理解函数表达式的工作原理将帮助开发者更好地组织代码并利用JavaScript的函数式编程能力。

== 参见 ==
* [[JavaScript箭头函数]]
* [[JavaScript闭包]]
* [[JavaScript立即调用函数表达式]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript函数]]