17370845950

箭头函数无this、不能作构造函数、无arguments和yield，仅适用于简化回调。它继承外层this，不可用call/apply/bind修改，无prototype，不支持new，参数需用...args，返回对象须加括号。

箭头函数没有自己的 this，它继承外层作用域的 this

这是最常踩坑的一点。传统函数（function）每次调用都会绑定自己的 this，取决于调用方式（如 obj.method() 中 this 指向 obj）；而箭头函数不绑定 this，它直接沿用定义时所在词法作用域的 this 值。

• 在对象方法中误用箭头函数会导致 this 指向意外（比如指向全局或 undefined）
• 事件回调、定时器里想访问实例属性时，用箭头函数反而“安全”，因为不会被调用上下文覆盖
• 无法通过 .call()、.apply()、.bind() 改变箭头函数的 this

const obj = {
  name: 'Alice',
  regular() {
    console.log(this.name); // 'Alice'
  },
  arrow: () => {
    console.log(this.name); // undefined（非严格模式下可能是 globalThis）
  }
};

箭头函数不能作为构造函数，也没有 prototype

你不能对箭头函数使用 new 关键字，它没有 [[Construct]] 内部方法，也不会创建实例。同时，它没有 prototype 属性，因此不适合用来定义需要原型链继承的类行为。

• new (() => {}) 会抛出 TypeError: xxx is not a constructor
• 想写工厂函数或封装逻辑可以，但别指望它能当“类”用
• 如果需要构造能力，必须用 function 或 class

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

箭头函数内部访问 arguments 会报 ReferenceError，它只能靠显式参数或剩余参数（...args）获取入参；同时它不是生成器函数，不能用 yield，也不能用 async + yield 组合（但可以用 async 箭头函数）。

• 替代 arguments：统一用 ...args 参数展开
• 需要生成器逻辑？必须改用 function*
• async () => {} 是合法的，但 async () => { yield 1; } 语法错误

const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
// 不要这样：
// const bad = () => Array.from(arguments).reduce(...); // ReferenceError

简写语法带来隐式返回，但容易忽略大括号和 return

单参数 + 单表达式可省略括号和 return，看起来干净，但一旦加了逻辑块（比如 if 或变量声明），就必须显式写 {} 和 return，否则返回 undefined。

• x => x * 2 返回数值；x => { x * 2 } 返回 undefined（没写 return）
• 返回对象字面量要加小括号：() => ({ a: 1 })，否则会被解析为代码块
• 嵌套箭头函数（如 arr.map(x => y => x + y)）易读性下降，调试时堆栈也更扁平，不利于定位

箭头函数不是万能替代品，它的设计初衷是简化回调和避免 this 绑定问题，而不是取代所有函数场景。什么时候该用、什么时候必须避开，关键看是否依赖 this、构造能力或参数动态性——这些地方一错就难调试。