在构建现代 Web 应用时，JavaScript 函数是我们手中最强大的工具之一。它们不仅能让我们封装特定的逻辑、执行复杂的计算，还能赋予网页交互性。然而，在编写代码时，你是否曾为 ‘function‘ 关键字的不同用法感到困惑？
在这篇文章中，我们将深入探讨 JavaScript 中定义函数的两种最基本方式：函数声明 和 函数表达式。虽然它们看起来很相似，但在底层机制、加载方式和行为表现上，却有着天壤之别。掌握这些细微的差别，不仅能帮你避免常见的“未定义”错误，还能让你写出更健壮、更专业的代码。让我们一起来揭开它们神秘的面纱。
核心概念：什么是函数声明？
函数声明，有时也被我们称为函数语句，这是定义函数最传统、最直观的方式。当你使用这种方式时，实际上是在告诉 JavaScript 解释器：“我要创建一个名为 XXX 的函数”。
基本语法与结构
函数声明的标志性特征是它必须有一个函数名。这使得它在调试时非常友好，因为调用栈会清晰地显示函数的名称，而不是匿名的“anonymous”。此外，函数声明是独立的构造体，它不需要赋值给任何变量，也不依赖于周围的代码块。
让我们看看标准的语法结构：
function greetUser(name) {
return "你好, " + name;
}
关键特性：提升
函数声明最独特的特性在于 JavaScript 引擎的“提升”机制。
当 JavaScript 代码在执行前进行编译阶段时，解析器会扫描整个代码，并将所有的函数声明提升到当前作用域的顶部。这意味着，无论你在代码的哪个位置声明了函数，你都可以在声明之前调用它。这是一种非常强大的行为，让我们在组织代码结构时拥有了极大的灵活性。
让我们看一个实际的例子：
// 我们在函数声明之前就调用了它
console.log(getArea(5, 10)); // 输出: 50
function getArea(width, height) {
console.log("计算面积中...");
return width * height;
}
// 即使在这里调用，也是完全合法的
console.log(getArea(2, 3)); // 输出: 6
代码工作原理深度解析：
在这个例子中，即使 INLINECODE3b90b3a2 函数的定义写在 INLINECODE9ce98759 之后，代码依然能完美运行。这是因为 JavaScript 引擎在后台默默地做了这样的“重排”：
- 首先读取
function getArea并将其放入内存。 - 然后逐行执行代码。
- 当执行到第一行 INLINECODEfc95b3e4 时，INLINECODE818b8e37 已经在内存中准备好了。
严格模式与块级作用域陷阱
虽然函数声明很方便，但在 INLINECODE3da916f6 引入的块级作用域中，我们需要格外小心。如果你在 INLINECODE8f6cce34 或 else 块中使用函数声明，浏览器的处理方式可能会出乎意料。
示例：块级作用域中的隐患
// 示例：条件函数声明在不同浏览器中表现可能不同
var condition = true;
if (condition) {
function demoScope() {
console.log("条件成立，函数被定义");
}
} else {
function demoScope() {
console.log("条件不成立，另一个函数被定义");
}
}
demoScope(); // 结果取决于浏览器实现，可能产生歧义
为了避免这种潜在的歧义，最佳实践通常是：如果函数是某块逻辑特有的，最好使用函数表达式（配合 INLINECODE7b4fb02d 或 INLINECODE559b5528），而不是函数声明。
—
核心概念：什么是函数表达式？
当我们把一个函数（无论是匿名的还是具名的）赋值给一个变量时，这就被称为函数表达式。这种方式更加灵活，因为它允许我们将函数像数据一样处理——传递、赋值、甚至在运行时动态创建。
语法与变量赋值
函数表达式最常见的形式是创建一个匿名函数（没有函数名），并将其赋值给一个变量。此时的函数名其实就是变量名。
关键特性：没有提升
与函数声明截然不同，函数表达式不会被提升。
这是因为函数表达式实际上是变量赋值操作的一部分。在 JavaScript 中，变量声明（INLINECODE0f538aab）会被提升并初始化为 INLINECODE91772e89，但赋值操作（INLINECODE61e92854）保留在原处等待执行。因此，在解释器执行到赋值代码的那一行之前，该变量的值都是 INLINECODE96b959f7。
这意味着：函数表达式只能在定义之后被调用。
让我们来看一个反例：
“INLINECODE6bdc8094`INLINECODEdab7ed31constINLINECODEe315b25dconstINLINECODE0972552cletINLINECODE23fecb0avarINLINECODE8b4e3abcconstINLINECODEe58960f2letINLINECODE7b61625cfunction myFunc() { … }INLINECODEcd777f17const myFunc = function() { … };INLINECODE62e9a004ifINLINECODEb2fbeef8loopINLINECODE1089c06cconstINLINECODEcab95a86var functionINLINECODE9239e7daconst` 表达式，或者体验一下在声明前调用函数声明带来的便利。只有通过亲手编写和调试，你才能真正将这些概念融入到你的编程直觉中。
祝你在 JavaScript 的进阶之路上越走越远！