JavaScript中什么是箭头函数_它和普通函数有何不同

箭头函数不是语法糖，它与普通函数在this词法绑定、无arguments对象、不可new调用等核心行为上存在本质差异，直接替换易引发隐性bug。

箭头函数不是语法糖，它和普通函数在 this、arguments、new 调用等核心行为上存在不可忽略的差异，直接替换可能引发隐性 bug。

箭头函数没有自己的 this

它不绑定 this，而是沿作用域链向上查找外层函数的 this（词法绑定）。这导致它不能用作对象方法或事件回调（当需要指向调用者时）。

• 普通函数中 this 由调用方式决定：obj.method() → this === obj；func() → this 是全局或 undefined（严格模式）
• 箭头函数中 this 始终等于定义时所在上下文的 this，无法通过 .call()、.apply()、.bind() 修改
• 常见坑：document.addEventListener('click', () => { console.log(this); }) → this 是外层作用域的值，不是 document

箭头函数没有 arguments 对象

它无法访问 arguments，也不能用 new.target 或 super（不能作为类构造器或方法）。

• 替代方案是使用剩余参数：(...args) => args[0]，而非 function() { return arguments[0]; }
• 若需兼容老代码或动态参数处理，避免在需要 arguments 的场景用箭头函数
• 试图访问 arguments 会报 ReferenceError: arguments is not defined

箭头函数不能用作构造函数

调用 new 箭头函数会立即抛出 TypeError: xxx is not a constructor。

立即学习“Java免费学习笔记（深入）”；

• 因为箭头函数没有 [[Construct]] 内部方法，也没有原型对象（ArrowFunc.prototype 不存在）
• 所有工厂函数、需要实例化的封装逻辑必须使用 function 声明或 class
• 即使写成 const Foo = () => {}，new Foo() 也必然失败

何时该用箭头函数

它最适合用于：短小的、无需独立 this、不需 arguments、不被 new 调用的回调或表达式。

• 数组方法回调：[1,2,3].map(x => x * 2)
• 简化事件监听器（当明确不需要 this 指向目标元素时）：btn.onclick = () => doSomething();
• 封装闭包逻辑：const makeAdder = (x) => (y) => x + y;
• 注意：react 函数组件本身是普通函数（不是箭头函数），因为 React 需要其函数名用于 DevTools 和错误堆栈

const obj = {   value: 42,   regular() {     return this.value; // 42   },   arrow: () => {     return this.value; // undefined（this 是全局或模块顶层）   } }; 
obj.regular(); // 42 obj.arrow();   // undefined

真正容易被忽略的不是“怎么写”，而是“在哪不能写”——尤其在迁移旧代码或重构回调时，this 绑定失效和构造调用失败往往不会立刻报错，而是在特定交互路径下才暴露。