箭头函数不是语法糖，它不绑定this、arguments、super或new.target，不能作构造函数，无prototype，无arguments对象，return需注意隐式与显式区别。
箭头函数不是普通函数的语法糖，它从根本上不绑定 this、arguments、super 或 new.target，因此不能用作构造函数，也不能通过 call/apply 动态改写上下文。
箭头函数没有自己的 this 绑定
普通函数的 this 在调用时确定（取决于调用方式），而箭头函数的 this 永远继承自外层词法作用域，无法被 call、bind 或 apply 修改。
常见错误现象：在事件回调或定时器中使用箭头函数导致 this 指向意外（比如指向全局或外层对象，而非预期的 DOM 元素或实例）。
- 需要动态
this的场景（如 Vue/React 类组件方法、DOM 事件处理器）慎用箭头函数 - 对象方法内定义箭头函数时，
this指向的是定义时的外层作用域，不是该对象本身 - 想让回调函数共享外层
this时，箭头函数反而更安全（比如setTimeout(() => this.doSomething(), 100)）
箭头函数不能作为构造函数调用
调用 new 箭头函数会直接抛出 TypeError: xxx is not a constructor 错误，因为它没有 [[Construct]] 内部方法，也没有原型对象 prototype。
使用场景：所有需要实例化的类逻辑（如封装工具类、状态容器）必须用普通函数或 class 声明。
-
const Fn = () => {};→new Fn()报错 -
function Fn() {}或class Fn {}→ 可正常实例化 - 箭头函数的
Fn.prototype是undefined，访问会返回undefined
箭头函数没有 arguments 对象
在箭头函数内部访问 arguments，实际获取的是外层函数的 arguments；若外层也没有，则报 ReferenceError。ES6 后推荐统一用剩余参数 ...args 替代。
兼容性影响：依赖 arguments.callee 实现递归或参数透传的旧代码，在箭头函数中完全失效。
- 普通函数中：
function f() { console.log(arguments[0]); }✅ - 箭头函数中：
const f = () => console.log(arguments[0]);❌（报错） - 正确替代：
const f = (...args) => console.log(args[0]);✅
箭头函数的 return 与大括号陷阱
当箭头函数体是单个表达式且省略大括号时，会隐式返回该表达式结果；但一旦用了大括号，就必须显式写 return，否则返回 undefined。
容易踩的坑：以为 () => { x: 1 } 会返回对象字面量，实际是块级作用域 + 标签语句，x: 1 被解析为带标签的语句，整个函数返回 undefined。
-
x => x * 2→ 返回计算值 -
x => ({ id: x→ 正确返回对象（小括号避免解析歧义）
})
-
x => { return { id: x }; }→ 显式返回才有效 -
x => { id: x }→ 不报错但返回undefined，极易引发空值 bug
真正难处理的不是语法差异，而是混合使用时 this 和 arguments 的隐式继承边界——尤其在嵌套回调、类方法、高阶函数中，稍不注意就会把外层上下文“偷渡”进来，而这种错误往往只在特定调用路径下暴露。
