javascript中箭头函数是什么_与传统函数有何不同呢_网络技术

javascript中箭头函数是什么_与传统函数有何不同呢

发布时间 - 2026-01-07 00:00:00 点击率：次

箭头函数不是语法糖，它与function函数在this绑定、无法new调用、无arguments和yield、单表达式隐式返回等核心行为上存在本质差异，不可随意互换。

箭头函数不是语法糖，它和 function 关键字声明的函数在 this、arguments、new 调用等核心行为上存在本质差异，不能随意互换。

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

这是最常踩坑的一点。传统函数的 this 取决于调用方式（如 obj.fn() 中 this 指向 obj），而箭头函数根本不绑定 this，它只是沿作用域链向上找外层函数的 this 值。

常见错误现象：

对象方法写成箭头函数后，this 指向全局或 undefined（严格模式）
事件回调里用箭头函数，本想访问实例属性却报 Cannot read property 'xxx' of undefined

const obj = {
  name: 'Alice',
  regularFn: function() {
    console.log(this.name); // 'Alice'
  },
  arrowFn: () => {
    console.log(this.name); // undefined（浏览器中是 window.name，通常为空）
  }
};

箭头函数不能作为构造函数，也不能使用 `new`

它没有 [[Construct]] 内部方法，也没有 prototype 属性。一旦尝试 new 一个箭头函数，会直接抛出 TypeError: xxx is not a constructor。

使用场景限制：

不能用于定义类或需要实例化的工具函数
Vue 2 的 data 选项若写成箭头函数，会导致 this 失效，进而 data 返回空对象
React 类组件中，生命周期方法、render 等不能用箭头函数定义（否则无法被框架正确调用）

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

它无法通过 arguments 访问实参列表，也不能用作 Generator 函数。替代方案是使用剩余参数 ...args。

参数差异与兼容性影响：

function fn() { console.log(arguments[0]); } ✅ 可用
const fn = () => { console.log(arguments[0]); } ❌ 报 ReferenceError: arguments is not defined
const fn = (...args) => console.log(args[0]); ✅ 推荐写法
const gen = () => { yield 1; } ❌ 语法错误：箭头函数不能含 yield