JavaScript箭头函数怎么用_它与普通函数有何区别？

箭头函数无this、无arguments、不能new调用、返回对象需括号包裹；this沿作用域链继承，arguments需用…args替代，无prototype故不可构造，返回对象字面量必须用()包裹。

箭头函数没有自己的 this，这点必须立刻意识到

箭头函数不绑定 this，它会沿作用域链向上找最近的非箭头函数的 this。这意味着在对象方法、事件回调或定时器中直接用箭头函数，this 很可能不是你预期的对象实例。

• 普通函数：this 由调用方式决定（如 obj.fn() 中 this 是 obj）
• 箭头函数：this 固定为定义时所在词法作用域的 this，无法通过 call/apply/bind 修改
• 常见翻车场景：vue/react 组件里把事件处理写成 onClick={() => this.handleClick()} 没问题，但若写成 const handler = () => { console.log(this); } 再传给子组件，this 就可能丢失上下文

arguments 在箭头函数里根本不存在

箭头函数没有自己的 arguments 对象。试图访问它会报 ReferenceError: arguments is not defined。

• 替代方案：用剩余参数 ...args —— 它在箭头函数中完全可用
• 错误写法：

  () => { console.log(arguments); }

• 正确写法：

  (...args) => { console.log(args); }

• 注意：即使外层是普通函数，箭头函数内部也不会继承其 arguments

不能用作构造函数，new 会直接报错

箭头函数没有 prototype 属性，也没有 [[construct]] 内部方法，所以不能被 new 调用。

• 执行 new (() => {}) 会抛出 TypeError: xxx is not a constructor
• 需要实例化？必须用普通函数或 class
• 这个限制也意味着箭头函数不能用 super 或 new.target

返回对象字面量时，括号不是可选的

箭头函数单表达式隐式返回时，如果想返回一个对象，必须用小括号包裹，否则大括号会被解析为函数体。

立即学习“Java免费学习笔记（深入）”；

• 错误（返回 undefined）：

  const fn = () => { a: 1 };

  —— 这里 { a: 1 } 被当成代码块，不是对象

• 正确：

  const fn = () => ({ a: 1 });

• 同理，返回数组字面量不需要括号：

  const arr = () => [1, 2];

  是安全的

箭头函数简洁，但它的“无 this、无 arguments、无 prototype”是设计使然，不是缺陷。用错地方时，问题往往不报错，而是静默失效——比如 this 指向意外的全局对象，这种 bug 最难排查。