javascript箭头函数是什么_和普通函数有何不同

陆砚码

2026-10-04 • 👁 1人浏览过

箭头函数无独立this绑定，沿作用域链继承外层普通函数的this，故不可用作对象方法、事件回调或构造函数；无arguments对象和yield支持；单表达式自动返回，块级需显式return。箭头函数没有自己的

this

绑定这是最常踩坑的一点：箭头函数不创建自己的

this

，而是沿作用域链向上找外层普通函数的

this

。这意味着它不能用作对象方法、事件回调（需动态

this

时）、或构造函数。常见错误现象：

const obj = {
  value: 42,
  normalFunc() { console.log(this.value); }, // 输出 42
  arrowFunc: () => { console.log(this.value); } // 输出 undefined（在非严格模式下可能是 globalThis）
};

如果在浏览器中执行，

this

指向

window

或

undefined

（严格模式），而非

obj

。需要动态绑定

this

的场景（如 DOM 事件监听器、Vue/React 方法）慎用箭头函数想让函数继承外层

this

（比如在

setTimeout

里保持当前对象上下文），箭头函数反而更安全类字段中写箭头函数（

handleClick = () => {}

）正是利用了这点，避免手动

bind

箭头函数不能用

new

调用它没有

[[Construct]]

内部方法，也没有

prototype

属性，所以调用

new myArrowFunc()

会直接抛出

TypeError: myArrowFunc is not a constructor

。对比：

function Person(name) { this.name = name; }

→ 可以

new Person('Alice')

const Person = (name) => { this.name = name; }

→

new Person('Alice')

报错即使函数体为空，

const fn = () => {};

依然不可构造没有

arguments

对象，也不支持

yield

箭头函数内部访问

arguments

会报

ReferenceError

，因为它根本不绑定该标识符——它会去外层函数找。同理，它不能用作 Generator 函数（不支持

function*

语法，也不能在函数体中写

yield

）。立即学习 “ Java免费学习笔记（深入） ”；替代方案： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载用剩余参数

...args

替代

arguments

（推荐，更语义化）需要

yield

就必须写成

function*

普通函数嵌套多层箭头函数时，

arguments

查找可能跨多级外层，容易误判来源简写语法带来的隐式返回限制当箭头函数体是单个表达式（无花括号）时，自动隐式返回结果；但一旦加了

{}

，就必须显式写

return

，否则返回

undefined

。示例：

const add = (a, b) => a + b;           // ✅ 返回和
const log = (x) => { console.log(x); }; // ❌ 不返回任何值（undefined）
const safeLog = (x) => { console.log(x); return x; }; // ✅ 显式返回

这个差异在链式调用或 Promise 处理中极易引发 bug：漏写

return

会导致后续

.then()

接收到

undefined

。容易被忽略的地方：解构赋值、对象字面量返回必须用括号包裹，否则 JS 会把

{}

解析为代码块而非对象：

const makeObj = () => ({ a: 1, b: 2 }); // ✅ 正确
const broken = () => { a: 1, b: 2 };     // ❌ 是代码块，标签语句，返回 undefined

相关文章