箭头函数无自有this、不可构造、无arguments、无yield、返回值需注意隐式规则:其this沿用外层,不能new调用,不支持arguments和yield,单表达式自动返回,对象字面量须用小括号包裹。

箭头函数没有自己的 this
这是最常踩坑的一点:箭头函数不绑定自己的 this,而是沿用外层作用域的 this 值。普通函数每次调用时会根据调用方式(如 obj.fn()、fn.call(obj))动态确定 this。
典型问题场景:
- 对象方法中写箭头函数 →
this指向外层(通常是window或undefined,严格模式下) - 事件回调里用箭头函数 → 本意是绑定当前实例,但若外层
this不对,就失效 - 想用
call/apply强制改变this→ 对箭头函数完全无效
示例:
const obj = {
name: 'Alice',
regular() { return this.name },
arrow: () => this.name
};
obj.regular(); // 'Alice'
obj.arrow(); // undefined(非严格模式下可能是 window.name)
箭头函数不能作为构造函数
调用 new 箭头函数会直接抛出 TypeError: xxx is not a constructor。因为箭头函数没有 [[Construct]] 内部方法,也没有 prototype 属性。
立即学习“Java免费学习笔记(深入)”;
这意味着:
- 不能用
new实例化 - 不能用在需要原型链继承的场景(如 Class 的静态方法中返回新实例时需谨慎)
- 无法通过
instanceof判断类型(它连prototype都没有)
替代方案:必须用普通函数或 class 定义构造逻辑。
箭头函数没有 arguments,也不支持 yield
箭头函数内部访问 arguments 会报 ReferenceError,因为它不创建自己的 arguments 对象。同理,它不能用 yield,因此不能作为 Generator 函数。
常见应对方式:
- 用剩余参数
...args替代arguments - 需要
yield就必须改用function*声明 - 在需要动态参数处理又想用箭头函数时,得提前把参数收进数组再传入
示例:
const bad = () => console.log(arguments); // ReferenceError const good = (...args) => console.log(args); // ✅
箭头函数的返回值隐式规则容易误判
当箭头函数体是单个表达式且省略大括号时,会自动返回该表达式的值;但一旦用了大括号,就必须显式写 return,否则返回 undefined。
这个差异在对象字面量返回时尤其危险:
-
x => ({a: 1})→ 正确返回对象(小括号避免被解析为代码块) -
x => {a: 1}→ 返回undefined(这其实是代码块,a: 1是标签语句) -
x => ({a: 1})和x => return {a: 1}看似一样,但后者语法错误(箭头函数里不能用return关键字除非有大括号)
最容易忽略的是:对象字面量必须包裹在小括号里,否则 JS 解析器会把它当作函数体的开始。










