JS函数声明与表达式区别详解

JavaScript中函数声明与函数表达式虽表面相似，实则在提升机制、执行时机、作用域行为及调试体验上存在本质差异：函数声明会被完全提升，支持前置调用且命名清晰利于调试；函数表达式（含箭头函数）则不提升，必须定义后使用，其中箭头函数更因无独立this、arguments且不可构造，在事件处理或对象方法中需谨慎选用；块级函数声明在严格模式下已被禁止，条件逻辑应改用函数表达式实现；实际开发中，应依场景选型——顶层工具函数优选声明，回调与闭包倾向表达式，简洁转换逻辑善用箭头函数，而始终为函数赋予明确名称，才能保障可读性、可维护性与线上问题的快速定位。

函数声明和函数表达式在执行时机上根本不同

JavaScript 中 function 关键字开头的语句，如果直接出现在脚本顶层或函数体顶层（不被赋值、不被括号包裹），就是**函数声明**；而如果它作为表达式的一部分出现（比如赋值给变量、传入参数、放在括号里），就是**函数表达式**。最关键的区别在于：函数声明会被**提升（hoisting）**，函数表达式不会。

• 函数声明：function foo() { return 'declared'; } —— 可以在定义前调用
• 函数表达式：const bar = function() { return 'expressed'; }; —— 必须在赋值后才能调用，否则报 ReferenceError 或 TypeError
• 匿名函数表达式（如 const fn = function() {}）在调试器中显示为 fn: ƒ anonymous()，可读性差；建议用命名函数表达式：const fn = function namedFn() {}，此时 namedFn 在函数体内可用，且 DevTools 能正确显示名称

箭头函数不是函数声明也不是函数表达式，而是独立语法

虽然箭头函数常被赋值给变量（const fn = () => {}），但它本身是表达式，且**没有自己的 this、arguments、super 或 new.target**。它不适用于需要动态 this 的场景（比如事件处理器中想访问触发元素，或对象方法中想访问实例）。

• 不能用作构造函数：new (() => {}) 报 TypeError: xxx is not a constructor
• 没有 arguments 对象，需改用剩余参数：const sum = (...nums) => nums.reduce((a, b) => a + b)
• 单参数、单表达式可省略括号和花括号：const square = x => x * x，但一旦加逻辑（如条件判断），必须加花括号和 return

函数声明不能出现在 if/for 等块级作用域中（严格模式下会报错）

早期非严格模式下，浏览器允许在 if 块里写 function foo() {}，但行为不统一（有的提升到函数作用域，有的只在块内可见）。ES6 明确规定：**函数声明在块级作用域中属于“非法语法”（early error）**，严格模式下直接抛 SyntaxError。

if (true) {
  function f() { return 1; }
}
// 严格模式下：Uncaught SyntaxError: Function declarations not allowed in single-statement context

若需条件定义函数，请用函数表达式：

let f;
if (true) {
  f = function() { return 1; };
}

实际项目中该选哪个？看用途和可维护性

函数声明适合模块顶层的、明确的、会被多次调用的工具函数（如 function validateEmail(str) {...}），利于阅读和调试；函数表达式更适合回调、IIFE、或需要闭包捕获变量的场景；箭头函数则优先用于简短的、无状态的转换逻辑（如 array.map(x => x.id)）。

• 避免混用：不要写 const fn = function foo() {} 还同时依赖 foo 名称做递归——应统一用 function foo() { return foo(); }（声明）或显式引用变量（const fn = function() { return fn(); };）
• 模块导出时，Node.js 和 ESM 都推荐用函数声明 + export function foo() {}，语义清晰且支持静态分析
• 函数名在堆栈追踪中至关重要——匿名表达式会让错误定位变困难，别图省事漏掉名字

函数名是否出现在调用栈、是否能被压缩工具安全重命名、是否参与作用域提升——这些细节在重构或排查线上问题时，往往比语法糖更影响效率。

今天关于《JS函数声明与表达式区别详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！