JavaScript函数定义与箭头函数解析

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript函数定义及箭头函数详解》，聊聊，希望可以帮助到正在努力赚钱的你。

箭头函数是函数表达式的语法糖，无this/arguments/super/new.target，不可作构造函数；普通函数声明会提升，表达式不会；箭头函数适用于需继承外层this的闭包场景，禁用于对象方法、arguments依赖、动态this绑定及原型继承。

JavaScript 里定义函数不只一种写法，箭头函数不是“新函数类型”，而是函数表达式的语法糖——它没有自己的 this、arguments、super 或 new.target，也不能用作构造函数。

普通函数声明 vs 函数表达式

函数声明会提升（hoist），可提前调用；函数表达式不会，必须先定义再调用。

• function foo() { return 'hello'; } —— 声明，可被提前访问
• const bar = function() { return 'world'; }; —— 表达式，bar 是变量，赋值后才存在
• 两者都创建具名或匿名的 Function 对象，行为一致（除提升外）

箭头函数怎么写？哪些地方不能用？

箭头函数省略 function 关键字和 return（单表达式时），但代价是丢失动态上下文绑定。

• 无参数：const fn = () => 42;
• 单参数可省括号：const square = x => x * x;
• 多参数或无参数必须加括号：const sum = (a, b) => a + b;
• 函数体含多语句需花括号 + 显式 return：const logThenReturn = x => { console.log(x); return x; };
• 不能用作构造函数：new (() => {}) 报 TypeError: xxx is not a constructor
• 对象字面量要包在小括号里，否则会被解析为代码块：const getObj = () => ({ a: 1 }); ✅，() => { a: 1 } ❌（返回 undefined）

为什么 this 在箭头函数里“不工作”？

箭头函数不绑定 this，它沿作用域链向上找外层非箭头函数的 this 值。这在事件回调、定时器、对象方法中极易出错。

• 错误示范：const obj = { name: 'test', run: () => console.log(this.name) }; obj.run(); → undefined（this 指向全局或 undefined）
• 正确写法：run() { console.log(this.name); }（方法简写）或 run: function() { ... }
• 需要闭包场景才用箭头：如 setTimeout(() => console.log(this.name), 100)（保留外层 this）
• React 类组件中，类字段箭头函数（handleClick = () => {...}）能避免手动 bind，但现代推荐用 useCallback 或事件内联（注意性能）

真正容易被忽略的不是语法，而是“什么时候不该用箭头函数”——比如定义对象方法、需要 arguments 的老式参数处理、要用 call/apply 动态改 this 的场景，或者需要 prototype 的继承逻辑。这些地方硬套箭头函数，问题往往延迟到运行时才暴露。

好了，本文到此结束，带大家了解了《JavaScript函数定义与箭头函数解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！