JS箭头函数是什么？详解与普通函数区别

珍惜时间，勤奋学习！今天给大家带来《JS箭头函数是什么？与普通函数区别详解》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

箭头函数不是语法糖，它没有自己的this、arguments、super和new.target；this在定义时绑定且不可变，不能用作构造函数或Generator函数，无arguments对象，需用...args替代。

箭头函数不是普通函数的语法糖，它没有自己的 this、arguments、super 或 new.target —— 这是所有差异的根源。

箭头函数的 this 永远继承自外层作用域

普通函数的 this 在调用时动态绑定（取决于怎么调），而箭头函数的 this 在定义时就固定了，无法被 call、apply、bind 改变。

常见错误现象：setTimeout 里用普通函数导致 this 丢失，改用箭头函数后正常：

const obj = {
  name: 'test',
  run() {
    // ❌ 普通函数：this 指向 global / undefined（严格模式）
    setTimeout(function() { console.log(this.name) }, 100)
    // ✅ 箭头函数：this 继承自 run 方法的 this
    setTimeout(() => { console.log(this.name) }, 100)
  }
}

• 不能用作构造函数：调用 new (() => {}) 会抛出 TypeError: xxx is not a constructor
• 对象方法中慎用：若方法需被其他上下文调用（如作为事件回调、传给 map），箭头函数可能锁死 this，反而不如普通函数灵活

箭头函数没有 arguments 对象

在箭头函数内部访问 arguments，实际拿到的是外层函数的 arguments，不是当前函数的参数列表。

使用场景：需要不定参数时，必须用剩余参数 ...args 替代：

// ❌ 错误：箭头函数里 arguments 不指向自身
const sum = () => Array.from(arguments).reduce((a, b) => a + b, 0)
<p>// ✅ 正确：用剩余参数
const sum = (...args) => args.reduce((a, b) => a + b, 0)</p>

• ES2015+ 环境下，优先用 ...args，语义清晰且无兼容性问题
• 若需兼容老旧环境且必须模拟 arguments 行为，只能改用普通函数

箭头函数不能用作 Generator 函数

箭头函数不支持 function* 语法，也没有 yield 关键字支持。

这意味着你无法用箭头函数实现异步迭代、惰性求值等依赖 yield 的逻辑：

// ❌ 语法错误
const gen = () => yield 1
<p>// ✅ 必须用普通函数
function* gen() {
yield 1
}</p>

• 箭头函数返回一个 Promise 是完全可行的（比如 () => fetch(...)），但和 Generator 无关
• 想写异步可暂停逻辑？选 async/await 配合普通函数，或直接用 function*

真正容易被忽略的是：箭头函数的「简洁」常让人误以为它更“现代”或“高级”，但它的限制是刚性的。什么时候该用、什么时候不该用，取决于你是否需要控制 this、是否要被 new 调用、是否要 yield —— 而不是代码行数少不多。

好了，本文到此结束，带大家了解了《JS箭头函数是什么？详解与普通函数区别》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！