函数表达式

函数表达式 vs 函数声明

在 JavaScript 中，函数有两种定义方式：

1. 函数声明（Function Declaration）

// 函数声明
function sayHello() {
    console.log('Hello');
}

// 特点：
// ✅ 会被提升（hoisting），可以在定义前调用
sayHello();  // 可以正常工作

function sayHello() {
    console.log('Hello');
}

2. 函数表达式（Function Expression）

// 函数表达式：将函数赋值给变量
const sayHello = function() {
    console.log('Hello');
};

// 特点：
// ❌ 不会被提升，必须在定义后调用
sayHello();  // ✅ 可以

// 匿名函数表达式
const greet = function() {
    console.log('Hi');
};

// 具名函数表达式（有名字，但外部仍用变量名调用）
const greet = function sayHi() {
    console.log('Hi');
};
greet();  // ✅
sayHi();  // ❌ ReferenceError: sayHi is not defined

两者对比

特性	函数声明	函数表达式
语法	function name() {}	const name = function() {}
提升	✅ 整体提升	❌ 只提升变量声明
可匿名	❌ 必须有名字	✅ 可以匿名
调用时机	定义前/后都可以	只能在定义后

函数表达式常见形式

// 1. 赋值给变量
const add = function(a, b) {
    return a + b;
};

// 2. 立即执行（IIFE）
(function() {
    console.log('立即执行');
})();

// 3. 作为回调函数
setTimeout(function() {
    console.log('延迟执行');
}, 1000);

// 4. 作为对象方法
const obj = {
    getName: function() {
        return 'Tom';
    }
};

// 5. 箭头函数（ES6 函数表达式的简写）
const multiply = (a, b) => a * b;

在您的代码中

// 函数表达式：赋给变量 fetchBtn 的 click 事件
fetchBtn.addEventListener('click', function() {
    // 这是一个匿名函数表达式
    fetchDataViaAjax();
});

// 也可以写成箭头函数（函数表达式的一种）
fetchBtn.addEventListener('click', () => {
    fetchDataViaAjax();
});

提升示例

// ✅ 函数声明 - 可以提前调用
showMessage();  // 输出 "Hello"

function showMessage() {
    console.log('Hello');
}

// ❌ 函数表达式 - 不能提前调用
showAlert();  // TypeError: showAlert is not a function

const showAlert = function() {
    console.log('Alert');
};

关键区别图示

// 函数声明提升
function a() {}    →  被整体提升到作用域顶部

// 函数表达式提升
const b = function() {}  →  只提升 const b（值为 undefined）
                           函数体留在原地

总结

术语	含义
函数声明	以 function 开头，有名字，会被提升
函数表达式	将函数作为值赋给变量，不会被提升，可匿名
匿名函数	没有名字的函数，通常是函数表达式
IIFE	立即执行的函数表达式，(function(){})()

在您代码的 IIFE (function() {})() 中，外层括号让函数声明变成了函数表达式，从而可以立即执行。