JavaScript函数定义及作用详解

JavaScript函数远不止是“可重用的代码块”，而是一个具有prototype、this绑定能力、可赋值、可匿名的**可调用对象**；理解函数声明（完全提升）与函数表达式（仅变量提升，箭头函数只能是表达式且无this）的关键差异，能避免大量运行时错误；参数设计上需注意arguments与...args互斥、默认参数从左到右求值且非末尾默认值需显式传undefined、剩余参数必须位于最后；尤其要警惕箭头函数的词法this——它在对象方法或事件处理器中极易导致上下文丢失，但在内部回调中却更安全可靠——真正考验功力的，是在复杂模块交互和深层调用链中精准选择函数形式与参数策略，确保逻辑健壮、上下文清晰、复用无忧。

JavaScript 函数不是“一段可重用的代码块”这种抽象描述能说清的——它本质是一个**可调用的对象**，有 prototype、能绑定 this、可被赋值给变量、甚至可以没有名字。

函数声明 vs 函数表达式：语法差异直接影响提升行为

这是最容易引发运行时错误的地方。函数声明（function foo() {}）会被**完全提升**（包括函数体），而函数表达式（const foo = function() {} 或 const foo = () => {}）只提升变量声明，不提升赋值。

• 在声明前调用 foo()：函数声明能成功；const 表达式会报 ReferenceError: Cannot access 'foo' before initialization
• var foo = function() {} 会提升变量但赋值为 undefined，调用时报 TypeError: foo is not a function
• 箭头函数只能是表达式，不存在声明形式，也不绑定 this

参数处理：arguments、剩余参数和默认值共存时的优先级

旧式 arguments 对象和现代的剩余参数（...args）不能同时出现在同一个函数中（会报 SyntaxError），且默认参数的求值顺序从左到右，右侧默认值可访问左侧已计算的参数。

• 带默认值的参数如果位于非末尾位置，调用时必须显式传入 undefined 才能触发默认值，例如：function f(a, b = 2, c) {} → f(1, undefined, 3) 才让 b 取 2
• 使用 ...args 后不能再有常规参数（除非是剩余参数本身），但可以跟在默认参数之后：function g(a = 1, ...rest) {}
• arguments 在严格模式下不跟踪参数变更，而 ...args 是真实数组，支持 map、filter 等方法

箭头函数没有自己的 this，但容易误判绑定时机

箭头函数的 this 是词法绑定的，取自定义时所在上下文的 this，而不是调用时。这点在事件回调、定时器或对象方法中极易出错。

• 对象方法写成箭头函数：const obj = { name: 'a', fn: () => console.log(this.name) } → this 指向全局或 undefined（严格模式），不是 obj
• 需要动态 this 的场景（如 Vue 方法、React 类组件事件处理器）不能用箭头函数定义方法本身
• 但可在内部回调中安全使用：arr.map(x => x * 2)，因为不依赖 this

真正难的不是写出一个能跑的函数，而是判断该用哪种形式定义、参数怎么设计才不会在深层调用链里丢掉上下文或默认逻辑——尤其当函数要被其他模块复用或作为参数透传时。

本篇关于《JavaScript函数定义及作用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！