17370845950

箭头函数与普通函数在this绑定、arguments、new调用等核心行为上存在本质差异，不可随意互换：箭头函数无动态this、无arguments、不能new调用，且无函数提升；普通函数支持动态this、arguments、yield、new及声明提升。

箭头函数不是普通函数的语法糖，两者在 this、arguments、new 调用等核心行为上存在本质差异，不能随意互换。

普通函数的 this 是动态绑定的，箭头函数的 this 是词法继承的

普通函数执行时，this 值取决于调用方式（如对象方法调用、call/apply、独立调用等）；箭头函数没有自己的 this，它会沿作用域链向上查找外层第一个普通函数的 this 值，并固定住。

常见错误现象：在事件回调或定时器中用箭头函数试图访问实例属性，却意外拿到全局 this（比如在类顶层定义箭头函数但外层没有普通函数作用域）。

• 需要动态 this（如 Vue 方法、React 类组件事件处理器）→ 必须用普通函数
• 明确要捕获外层 this（如 setTimeout(() => this.do(), 100)）→ 箭头函数更安全
• 在严格模式下，普通函数独立调用时 this 为 undefined；箭头函数不受此影响，只看外层

箭头函数没有 arguments 对象，也不支持 yield 和 new

箭头函数内部访问 arguments 会报 ReferenceError，因为它不创建该绑定；同样，它没有 prototype 属性，不能用 new 调用，否则抛出 TypeError: xxx is not a constructor。

使用场景受限明显：

• 需要类数组参数对象（如兼容老代码）→ 只能用普通函数
• 写 Generator 函数 → 必须用 function*，箭头函数不支持 yield
• 作为构造器（哪怕只是模拟）→ 箭头函数直接不可用

const regular = function() {
  console.log(arguments); // [1, 2, 3]
};
const arrow = () => {
  console.log(arguments); // ReferenceError
};
regular(1, 2, 3);

简写语法带来的隐式返回陷阱

单参数 + 单表达式时，箭头函数可省略括号和 return，但若想返回对象字面量，必须加括号，否则大括号会被解析为函数体。

• x => { x: 1 } → 返回 undefined（这是语句块，不是对象）
• x => ({ x: 1 }) → 正确返回对象
• 多参数或无参数必须加括号：(a, b) => a + b、() => 42

const getObj = () => ({ name: 'Alice' }); // ✅
const broken = () => { name: 'Alice' };   // ❌ 返回 undefined

普通函数声明有变量提升，箭头函数只能是表达式

function foo() {} 会被提升到作用域顶部，可在声明前调用；箭头函数只能以变量赋值形式出现（const foo = () => {}），受 let/const 的暂时性死区限制。

这意味着：

• 需要函数提升（如递归自调用、模块顶部逻辑）→ 只能用 function 声明
• 用 var 声明箭头函数仍会提升变量名，但赋值不会，所以仍不可用
• ES6 模块中默认导出箭头函数时，必须确保导入顺序不依赖其提前可用

真正要注意的不是“哪个更简洁”，而是“哪个行为符合当前上下文的运行时契约”——尤其在类方法、事件监听、异步回调、构造逻辑中，选错函数类型会导致 this 错乱、无法实例化或参数丢失，这类问题往往在特定执行路径下才暴露。