17370845950

箭头函数无this绑定、不可new调用、无arguments/super/new.target；适合回调保持外层this，禁用于需动态this、构造、继承或访问arguments的场景。

箭头函数没有自己的 this 绑定

这是最常踩坑的一点。箭头函数不创建自己的 this，而是沿用外层作用域的 this 值——无论怎么调用，this 都不会变。

传统函数（如 function() {} 或方法定义）在每次调用时会根据调用方式重新绑定 this：作为对象方法调用时指向该对象，被 call/apply 调用时按传入值绑定，独立调用时在非严格模式下指向 window（或 globalThis），严格模式下为 undefined。

而箭头函数的 this 在定义时就确定了，之后无法通过任何方式修改。

const obj = {
  value: 42,
  regular() {
    return this.value; // ✅ 正常返回 42
  },
  arrow: () => {
    return this.value; // ❌ this 指向外层（通常是 global），不是 obj
  },
  delayedRegular() {
    setTimeout(function() {
      console.log(this.value); // ❌ this 是全局对象，输出 undefined（严格模式）或报错
    }, 100);
  },
  delayedArrow() {
    setTimeout(() => {
      console.log(this.value); // ✅ this 是 obj，输出 42
    }, 100);
  }
};

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

调用 new 一个箭头函数会直接抛出 TypeError: xxx is not a constructor 错误。

因为箭头函数没有 [[Construct]] 内部方法，也没有 prototype 属性（ArrowFunc.prototype 是 undefined）。

• 需要实例化、需要原型链、需要继承的场景，必须用传统函数或 class
• bind、call、apply 对箭头函数无效（它们本就不响应 this 绑定）
• 箭头函数没有 arguments 对象；要用参数需改用剩余参数 ...args

箭头函数没有 arguments、super、new.target

这些是「语法绑定」（syntactic binding）的绑定，只存在于传统函数作用域中。

箭头函数体内访问 arguments 实际读取的是外层函数的 arguments（如果外层也不是函数，则报错）；同理，super 和 new.target 在箭头函数里不可用，否则会触发 ReferenceError。

function outer() {
  const arrow = () => {
    console.log(arguments[0]); // ✅ 输出 outer 的第一个参数
  };
  arrow();
}
outer('hello'); // 输出 'hello'

const badArrow = () => {
  console.log(arguments); // ❌ ReferenceError: arguments is not defined
};

什么时候该用箭头函数？

核心判断依据是：你是否**依赖动态的 this 绑定**，或者是否需要**被 new 调用**。

• 回调函数（尤其是异步、事件监听器中要保持 this 上下文）→ 适合箭头函数
• 对象方法、Vue/React 类组件中的方法、需要 this 指向实例的逻辑 → 必须用传统函数
• 需要 arguments 或写 super.xxx() → 只能用传统函数
• 纯粹的计算逻辑、map/filter 回调、工具函数 → 箭头函数更简洁，但注意闭包中的 this 来源

最容易被忽略的是：在类字段中写箭头函数（如 handleClick = () => {}）看似“自动绑定”，实则每次实例化都会新建函数，影响性能和 === 判断；而用 bind 或事件委托才是更可控的选择。