JavaScript函数表达式

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

简介

在JavaScript中，函数表达式是一种将函数定义为表达式的方式。它可以是：

• 匿名函数表达式：没有名称的函数，通常赋值给变量。
• 具名函数表达式（Named Function Expression, NFE）：带有名称的函数，有助于调试和递归调用。

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

基本语法

函数表达式的基本语法如下：

// 匿名函数表达式
const myFunction = function(parameters) {
    // 函数体
};

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

示例：匿名函数表达式

const greet = function(name) {
    return `Hello, ${name}!`;
};

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

示例：具名函数表达式

const factorial = function computeFactorial(n) {
    if (n <= 1) return 1;
    return n * computeFactorial(n - 1); // 递归调用
};

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

函数表达式 vs 函数声明

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

特性	函数表达式	函数声明
提升	否	是
定义时机	运行时求值	解析时定义
匿名支持	支持	不支持

实际应用场景

函数表达式常用于以下场景：

1. 回调函数

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return num * 2;
});

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

2. IIFE（立即调用函数表达式）

(function() {
    console.log("This runs immediately!");
})();

3. 闭包

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

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

高级概念

箭头函数表达式

ES6引入的箭头函数是函数表达式的简写形式：

const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出: 5

函数表达式的类型

在TypeScript中，可以明确指定函数表达式的类型：

const greet: (name: string) => string = function(name: string) {
    return `Hello, ${name}!`;
};

性能考虑

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

常见错误

1. 在定义前调用：

console.log(myFunc()); // 错误: myFunc未定义
const myFunc = function() { return "Hello"; };

2. 混淆具名函数表达式的名称作用域：

const foo = function bar() {
    console.log(typeof bar); // 输出: "function"（仅在函数内部可用）
};
console.log(typeof bar); // 输出: "undefined"

总结

JavaScript函数表达式是灵活定义函数的重要方式，特别适合：

• 需要将函数作为值传递的场景
• 创建闭包
• 实现IIFE模式
• 编写箭头函数

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

参见

• JavaScript箭头函数
• JavaScript闭包
• JavaScript立即调用函数表达式