函数声明与表达式区别全解析

JavaScript中函数声明与函数表达式绝非只是写法差异，而是关乎代码能否正确执行的核心机制：函数声明会被完全提升，允许先调用后定义；而函数表达式（包括箭头函数和命名函数表达式）仅变量声明可能提升、赋值不提升，提前调用必报错，且块级函数声明在严格模式下作用域受限、跨浏览器行为不一致——这些看似细微的差异，往往在重构、调试异步逻辑或兼容旧环境时引发隐蔽而致命的运行时错误，因此推荐统一采用let/const声明的函数表达式，以获得可预测的作用域、清晰的执行时机和更强的跨平台可靠性。

函数声明和函数表达式在执行时机、作用域行为和可调用性上根本不同，不是写法偏好问题，而是会影响代码是否报错、何时能用。

函数声明会被提升（hoisting），函数表达式不会

JavaScript 引擎在执行前会先处理所有 function 声明语句，并把函数名和定义一起“提升”到当前作用域顶部。所以你能在声明前就调用它：

console.log(add(1, 2)); // 3
function add(a, b) {
  return a + b;
}

但函数表达式只是变量赋值，只有变量声明（var）会被提升，赋值不会：

console.log(multiply(2, 3)); // TypeError: multiply is not a function
var multiply = function(a, b) {
  return a * b;
};

• 如果用 let 或 const 声明函数表达式，连变量声明都不会提升，直接报 ReferenceError
• 箭头函数本质也是函数表达式，同样不提升
• 提升只发生在函数声明（function name() {...}），不包括命名函数表达式（var f = function name() {...}）

命名函数表达式有名字，但名字只在函数内部可用

给函数表达式加名字（比如 var f = function foo() {...}）不是为了外部调用，而是用于调试和递归：

var factorial = function fact(n) {
  return n 

• 函数名 fact 在外部作用域不可访问，只存在于函数自身作用域内
• Chrome 和 Firefox 的开发者工具会用这个名称显示调用栈，比 anonymous 更易排查
• 不命名的函数表达式（function() {...}）在堆栈里显示为 anonymous 或空字符串

函数声明必须有名字，函数表达式可以匿名

function 关键字后紧跟标识符是语法强制要求 —— 函数声明不能匿名：

function () { } // SyntaxError: Function statements must have a name

而函数表达式作为值，可以没有名字：

var handler = function() { console.log('clicked'); };
button.addEventListener('click', handler);

• 事件回调、定时器、Promise 回调等场景中，匿名函数表达式更简洁
• 但若需调试或递归，应优先用命名函数表达式
• ES6+ 中，const fn = () => {} 是带词法作用域的函数表达式，也必须匿名（箭头函数无 name 属性）

严格模式下，函数声明在块级作用域中的行为不一致

在非严格模式中，函数声明出现在 if 或 {} 块内时，部分引擎（如旧版 Chrome）会将其提升到函数作用域顶层，但这是非标准行为；严格模式下，块级函数声明被规范为仅在该块内有效：

'use strict';
if (true) {
  function inside() { return 'ok'; }
}
inside(); // ReferenceError in strict mode

• 这种差异导致跨浏览器兼容性风险，建议避免在块内写函数声明
• 如需条件定义函数，统一用函数表达式 + 变量赋值（let/const）更可靠
• Node.js v14+ 和现代浏览器对块级函数声明支持较一致，但仍建议以表达式为准

真正容易出问题的地方，往往不是“怎么写”，而是“什么时候能用”——提升规则、块级作用域限制、调试信息缺失，这些细节在重构或调试异步链时才会突然暴露。

好了，本文到此结束，带大家了解了《函数声明与表达式区别全解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！