箭头函数无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(严格模式下)。
网奇.NET网络商城系统是基于.Net平台开发的免费商城系统。功能强大,操作方便,设置简便。无需任何设置,上传到支持asp.net的主机空间即可使用。系统特色功能:1、同时支持Access和SqlServer数据库;2、支持多语言、多模板3、可定制缺货处理功能4、支持附件销售功能5、支持会员组批发功能6、提供页面设计API函数7、支持预付款功能8、配送价格分地区按数学公式计算9、商品支持多类别,可
替代方案统一用剩余参数 ...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 回调时极易出错。










