普通函数的this调用时决定,箭头函数的this定义时绑定。前者动态取决于调用方式(直接调、对象方法、call/bind、new),后者静态继承外层普通函数的this,不受call/apply/bind影响,常用于定时器、事件监听、数组遍历等需固定this的场景。

核心差异就一点:普通函数的 this 是调用时才决定的,箭头函数的 this 是写好时就定死的。
普通函数的 this 是动态的
它不看“谁写的”,只看“谁调的”:
- 直接调用
fn()→ 非严格模式下this是window(或global),严格模式下是undefined - 作为对象方法调用
obj.method()→this指向obj - 用
call/apply/bind调用 → 可手动指定this值 - 用
new调用 →this指向新创建的实例
箭头函数的 this 是静态的
它没有自己的 this,只认“出生地”——定义时外层最近那个普通函数的 this 值:
- 外层是类方法,它就继承类实例的
this - 外层是全局作用域,它就指向
window或undefined(严格模式) -
call/apply/bind对它完全无效 - 写在对象字面量里(如
{ fn: () => this.name }),this不会自动指向该对象
哪些场景最容易踩坑
实际开发中,这几个地方最常暴露差异:
- 定时器回调:
setTimeout(function() { console.log(this.val) })中的this通常丢失;换成箭头函数就自然保留外层上下文 - 事件监听或数组遍历传参:
arr.map(this.handleItem)会导致this变成undefined;改用箭头函数或类字段写法handleItem = () => {}就稳了 - 对象方法内嵌套:普通函数能访问
this.name,但若把箭头函数直接定义在对象里,this往往不是你期待的那个对象
怎么选,看你要不要 this 变
需要 this 随调用方式变化 → 用普通函数(比如对象方法、构造器、希望 this 是事件目标元素的监听器)
需要 this 始终固定 → 用箭头函数(比如回调、工具函数、类内部绑定实例上下文)


















