当前位置：首页 > 文章列表 > 文章 > 前端 > 箭头函数与传统函数区别详解

箭头函数与传统函数区别详解

2026-01-10 10:00:39 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《箭头函数与传统函数的区别解析》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

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

为什么Javascript的箭头函数与传统函数有区别？

箭头函数没有自己的 `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
};