javascript箭头函数是什么_它与普通函数有何不同【教程】

2026-01-31 00:00:00 作者：紅蓮之龍

箭头函数没有自己的this，继承外层作用域的this；不能用作构造函数，无prototype和arguments；简写语法需注意对象字面量要加括号；适合短回调，不适用于需动态this或复杂逻辑的场景。

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

这是最常踩坑的地方。普通函数的 this 取决于调用方式（如 obj.method() 中 this 指向 obj），而箭头函数根本不绑定 this，它直接沿作用域链向上找外层函数的 this。

典型错误场景：

在对象方法中用箭头函数：const obj = { name: 'a' , fn: () => console.log(this.name) } → this 指向全局或 undefined（严格模式），不是 obj
事件回调里想访问实例：button.addEventListener('click', () => this.handleClick()) → 如果写在类方法里，this 是类实例；但如果写在全局，就不是

箭头函数不能用作构造函数，也没有 `prototype` 和 `arguments`

它没有 [[Construct]] 内部方法，所以不能被 new 调用，否则报错：TypeError: xxx is not a constructor。

同时：

没有 arguments 对象 —— 用剩余参数 ...args 替代
没有 prototype 属性 —— ArrowFn.prototype 是 undefined
不能用 yield，不支持生成器语法

简写语法省略 `return` 和花括号只适用于单表达式

这是写错逻辑的高发区。以下写法看似简洁，实则隐含返回值：

const add = (a, b) => a + b; // ✅ 返回 a + b
const obj = (a, b) => ({ a, b }); // ✅ 注意括号：必须包一层小括号，否则被解析为代码块
const broken = (a, b) => { a, b }; // ❌ 代码块，无 return，返回 undefined

常见误判点：