17370845950

箭头函数无this、不绑定arguments、不可new调用、无prototype、无new.target、无yield；单参数单表达式可省略return，但返回对象需括号包裹，否则解析为代码块。

箭头函数没有自己的 this，会沿作用域链向上找

这是最常踩坑的一点。传统函数的 this 在调用时动态绑定（取决于怎么被调用），而箭头函数根本不绑定 this，它直接继承外层普通函数或全局作用域的 this 值。

典型错误场景：

• 对象方法里写箭头函数：obj.method = () => { console.log(this) } → this 不是 obj，而是定义时所在上下文的 this
• 事件回调中：button.addEventListener('click', () => { this.handleClick() }) → 如果想让 this 指向组件实例，必须确保外层函数已正确绑定 this，否则会报 undefined 或指向 window
• 使用 call/apply/bind 试图改变箭头函数的 this —— 完全无效，因为箭头函数无视这些调用方式

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

尝试用 new 调用箭头函数会直接抛出 TypeError: xxx is not a constructor。它没有 prototype 属性，也不支持原型链继承。

这意味着：

立即学习“Java免费学习笔记（深入）”；

• 不能用于类组件的构造逻辑（比如 React 类组件中不能把 render 写成箭头函数并期望它被实例化）
• 无法通过 instanceof 判断类型归属
• 若需构造行为（如封装私有状态、返回新实例），必须用传统函数或 class

const Arrow = () => {};
console.log(Arrow.prototype); // undefined
new Arrow(); // TypeError

箭头函数没有 arguments，也没有 new.target

在传统函数内部，arguments 是一个类数组对象，保存所有传入参数；箭头函数里访问 arguments，拿到的是外层函数的 arguments，或者报 ReferenceError（严格模式下）。

替代方案统一用剩余参数 ...args：

function traditional() {
  console.log(arguments); // [1, 2, 3]
}
const arrow = (...args) => {
  console.log(args); // [1, 2, 3]
};

其他缺失特性还包括：

• new.target：箭头函数中始终为 undefined，无法判断是否被 new 调用
• yield：不能用作生成器函数（没有 function* 对应的箭头语法）

简写语法带来的隐式返回与括号陷阱

单参数 + 单表达式可省略括号和 return，但一旦返回对象字面量，必须加小括号，否则会被解析为代码块：

const getId = id => ({ id }); // ✅ 返回 { id: ... }
const getIdBroken = id => { id }; // ❌ 返回 undefined（{ id } 是块级作用域，不返回）

常见误写：

• x => { x * 2 } → 没有 return，返回 undefined
• () => { return { a: 1 } } → 正确，但不如 () => ({ a: 1 }) 简洁
• 多行逻辑必须用大括号 + 显式 return，否则不会返回值

这个细节在写 React 函数组件或 map 回调时极易出错。