箭头函数没有自己的this,继承外层词法作用域的this;不能用作构造函数,无prototype、arguments、caller、callee、yield,也不支持new调用,适用于无需独立this和构造能力的场景。

箭头函数没有自己的 this,它继承外层作用域的 this
这是最常踩坑的一点。普通函数的 this 在调用时动态绑定(取决于怎么调用),而箭头函数压根不绑定 this,它直接从定义时的词法作用域向上查找 this 值。
典型问题场景:给 DOM 元素绑定事件、在对象方法中使用定时器、Vue/React 组件里写回调。
- 普通函数:
const obj = { name: 'Alice', say: function() { console.log(this.name) } } obj.say() // 'Alice';但 setTimeout(obj.say, 100) 会输出undefined(因为this指向全局) - 箭头函数:
const obj = { name: 'Alice', say: () => { console.log(this.name) } // 这里的this是定义时外层的this,不是obj} // 即使调用 obj.say(),也几乎肯定不是你想要的结果
箭头函数不能用作构造函数,也没有 prototype 和 arguments
它没有 [[Construct]] 内部方法,所以不能用 new 调用;同时没有 prototype 属性,也不能被原型链继承;也没有独立的 arguments 对象(得靠 rest 参数 ...args 替代)。
- 报错示例:
const Arrow = () => {} new Arrow() // TypeError: Arrow is not a constructor - 替代
arguments:function old(a, b) { console.log(arguments[0]) } const arrow = (...args) => { console.log(args[0]) }
箭头函数没有 arguments、caller、callee,也不支持 yield
这些是普通函数的特有属性或能力。箭头函数设计初衷就是“轻量级函数表达式”,不承担构造、动态参数捕获或协程职责。
立即学习“Java免费学习笔记(深入)”;
-
arguments不可用 → 必须用 rest 参数; -
caller/callee在严格模式下本就禁用,但箭头函数彻底没这俩属性; -
yield不能用 → 要写生成器必须用function*,不能写() => yield; - 没有
name属性(或为""),调试时堆栈里显示为anonymous。
什么时候该用箭头函数?记住两个关键信号
一是「不需要自己的 this」,二是「不需要被 new 调用」。常见于:数组方法回调(map/filter/reduce)、事件监听器(当需要闭包访问外层变量时)、Promise 链中的 then 回调。
- 推荐用法:
[1, 2, 3].map(x => x * 2) button.addEventListener('click', () => this.handleClick()) // this 指向组件实例 - 不该用的场景:
const utils = { now() { return Date.now() }, delay: () => setTimeout(this.now, 100) // ❌ this.now 是 undefined,因为箭头函数的 this 不是 utils
真正容易被忽略的是:箭头函数的简洁性会掩盖它对执行上下文的“无感”——它不关心你怎么调用它,只认自己出生的地方。写之前先问一句:这里需要自己的 this 吗?需要被 new 吗?需要动态参数吗?答案只要有一个“是”,就别用箭头函数。











