箭头函数与普通函数在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 错乱、无法实例化或参数丢失，这类问题往往在特定执行路径下才暴露。
