箭头函数不是语法糖,它没有自己的this、arguments、super、new.target,不能作为构造函数;this继承自外层词法作用域,不可被call/bind修改;无arguments对象,需用剩余参数替代;简写易出错,核心在于理解其“不做什么”。

箭头函数不是普通函数的语法糖,它没有自己的 this、arguments、super 或 new.target,也不能用作构造函数——这是最根本的区别,不是“写法更短”那么简单。
箭头函数没有独立的 this 绑定
普通函数的 this 取决于调用方式(如 obj.fn() 中 this 指向 obj),而箭头函数的 this 始终继承自外层词法作用域。
常见错误现象:
在事件回调或定时器中使用箭头函数导致本该指向 DOM 元素的 this 变成全局对象或 undefined(严格模式下);或在对象方法中误用箭头函数,导致无法访问实例属性。
实操建议:
• 需要动态 this 的场景(如 Vue/React 类组件方法、DOM 事件处理器、对象方法)避免用箭头函数
• 在回调中需保持外层 this 时(如 array.map(x => this.process(x)))可放心使用
• 不要试图用 .call() 或 .bind() 改变箭头函数的 this —— 它们完全无效
立即学习“Java免费学习笔记(深入)”;
箭头函数不能作为构造函数调用
调用 new (() => {}) 会直接抛出 TypeError: xxx is not a constructor。
使用场景:
• 所有需要 new 实例化的类、工厂函数、原型方法都必须用普通函数(含 function 声明、函数表达式、ES6 class 内部方法)
• 箭头函数适合纯计算逻辑、闭包封装、高阶函数返回值等无状态场景
性能影响:
• 无构造能力意味着 V8 等引擎不会为其生成 [[Construct]] 内部方法,内存开销略小
• 但差异微乎其微,不应作为选型依据
箭头函数没有 arguments 对象
在箭头函数内部访问 arguments,得到的是外层函数的 arguments,而非当前函数参数列表。
实操建议:
• 使用剩余参数 (...args) => {...} 替代 arguments —— 这是推荐写法,且更语义清晰
• 若需兼容老环境又必须访问参数伪数组,只能改用普通函数
• 注意:箭头函数也没有 caller 和 callee,这些已被严格模式禁用,实际中基本不用
单参数与无参数的简写陷阱
看似方便的简写容易引发歧义或错误:
• x => x * 2 是合法的(隐式返回)
• x => { x * 2 } 不会返回任何值(花括号被解析为函数体,不是对象字面量)
• () => ({ a: 1 }) 必须加括号,否则 { a: 1 } 被当作代码块解析,返回 undefined
容易踩的坑:
• 把对象字面量直接写在箭头函数体里却不包裹小括号 → 静默失败,返回 undefined
• 多行箭头函数忘记用 return → 默认返回 undefined,而非预期对象
• 解构参数时误写成 ({a, b}) => a + b(正确),但若漏掉括号写成 {a, b} => a + b → 语法错误
真正要注意的不是“怎么写更短”,而是“它不做什么”——尤其是 this 和构造能力的缺失,在 class 方法、事件绑定、模块导出函数等地方一旦混淆,调试成本远高于多敲几个字符。











