JavaScript函数几种定义方式详解

今天golang学习网给大家带来了《JavaScript函数定义方式解析》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

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

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

JavaScript 会把 function 声明（即函数声明）**提升（hoist）到当前作用域顶部**，所以可以在定义前调用；而函数表达式只是变量赋值，var 声明会被提升但赋值不会，let/const 甚至不提升声明本身——这意味着在定义前调用函数表达式必然报错 TypeError: xxx is not a function 或 ReferenceError。

实操建议：

• 需要在定义前调用（比如事件回调、递归入口），优先用函数声明
• 想控制初始化顺序或避免意外提升，用 const myFn = function() { ... } 或箭头函数
• 注意：只有 function name() { ... } 形式才算函数声明；const f = function name() { ... } 是带名字的函数表达式，名字只在内部可用（用于调试和递归），不影响外部作用域

name 属性和堆栈追踪表现不一样

函数声明的 name 属性总是准确反映声明时写的名称；函数表达式是否带名，直接影响错误堆栈和 console.log(myFn.name) 的输出。

实操建议：

• 调试时看到 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 参数替代——这点与是否匿名无关，纯属语言演进选择。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~