函数声明会被提升到作用域顶部,可提前调用;函数表达式仅变量声明提升(var)或不提升(let/const),提前调用报错。实操中需提前调用选声明,控初始化顺序选const/箭头函数。

函数声明和函数表达式在执行时机上根本不同
JavaScript 会把 function 声明(即函数声明)**提升(hoist)到当前作用域顶部**,所以可以在定义前调用;而函数表达式只是变量赋值,var 声明会被提升但赋值不会,let/const 甚至不提升声明本身——这意味着在定义前调用函数表达式必然报错 TypeError: xxx is not a function 或 ReferenceError。
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 需要在定义前调用(比如事件回调、递归入口),优先用函数声明
- 想控制初始化顺序或避免意外提升,用
const myFn = function() { ... }或箭头函数 - 注意:只有
function name() { ... }形式才算函数声明;const f = function name() { ... }是带名字的函数表达式,名字只在内部可用(用于调试和递归),不影响外部作用域
name 属性和堆栈追踪表现不一样
函数声明的 name 属性总是准确反映声明时写的名称;函数表达式是否带名,直接影响错误堆栈和 console.log(myFn.name) 的输出。
实操建议:
立即学习“Java免费学习笔记(深入)”;
- 调试时看到
anonymous,大概率是没给函数表达式命名,加上名字能显著改善 DevTools 中的断点定位和错误堆栈可读性 - 递归调用函数表达式时,必须写名字(如
const factorial = function fact(n) { return n ),否则内部无法引用自身 - 箭头函数没有
name属性(返回空字符串),也不绑定this或arguments,别指望它替代具名函数表达式做递归
作为参数传入或立即执行时,语法边界容易出错
JS 解析器看到 function 开头的语句,**默认按函数声明处理**;但如果它出现在表达式上下文中(如括号内、赋值右侧、逗号后),才会当作函数表达式。漏掉括号或分号可能触发意外行为。
常见错误现象:
-
function(){}();报错:解析器认为这是函数声明,但后面跟()不合法 -
var a = function(){}();合法:赋值语句右侧强制进入表达式解析模式 -
(function(){}());合法:括号让解析器明确进入表达式上下文,这是 IIFE 标准写法 -
!function(){}();也合法:一元运算符同样触发表达式解析
性能影响很小,但写法不统一容易引发团队协作歧义——建议始终用括号包裹 IIFE,清晰表明意图。
箭头函数不是“更短的函数表达式”,它没有自己的 this 和 arguments
箭头函数本质是词法绑定的函数表达式变体,它不创建自己的 this、arguments、super 或 new.target,而是继承外层函数作用域的值。这导致它不能用作构造函数(new (() => {}) 报错),也不能用 call/apply 改变 this。
使用场景判断:
- 需要动态
this(如事件处理器、对象方法),别用箭头函数 - 写回调且依赖外层
this(如 React 类组件中onClick={() => this.setState(...)}),箭头函数合适 - 用
arguments处理不定参?得改用剩余参数...args,因为箭头函数里访问arguments会报ReferenceError
函数声明和函数表达式都支持 arguments,但现代代码更推荐用 ...rest 参数替代——这点与是否匿名无关,纯属语言演进选择。











