this 的值由函数执行时的调用方式决定:普通调用指向全局对象或 undefined;对象方法调用指向点前对象;call/apply/bind/new 可显式绑定;箭头函数继承外层 this;事件回调中易丢失 this,需 bind 或箭头函数修复。

this 的值不是写死的,也不是看函数怎么定义的,而是看它**被谁调用、怎么调用**。换句话说:函数执行时的调用方式决定 this 指向谁。
普通函数调用时,this 指向全局对象(非严格模式)或 undefined(严格模式)
这是最容易踩坑的地方。比如:
function foo() {
console.log(this);
}
foo(); // 非严格模式下输出 window(浏览器),严格模式下输出 undefined
- 直接写
foo()调用,没挂载在任何对象上,就属于“普通调用” - Node.js 环境下全局对象是
global,不是window - 箭头函数没有自己的
this,它会沿作用域链向上找外层普通函数的this,所以不适用这条规则
对象方法调用时,this 指向该对象(隐式绑定)
只要函数是作为对象的属性被调用,this 就指向这个对象:
const obj = {
name: 'Alice',
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 'Alice'
- 关键看调用时的“点前面是谁”:
obj.sayName()中点前面是obj,所以this是obj - 如果把方法赋值给变量再调用:
const fn = obj.sayName; fn();—— 这就变成普通调用了,this不再是obj - 嵌套对象也一样:
obj.nested.method()中this指向obj.nested,不是最外层obj
call / apply / bind 和 new 调用会显式改变 this 指向
这三者都能强制指定 this 值,但行为不同:
立即学习“Java免费学习笔记(深入)”;
-
func.call(obj, arg1, arg2):立即执行,this绑定到obj -
func.apply(obj, [arg1, arg2]):立即执行,参数以数组传入 -
const bound = func.bind(obj):返回新函数,this永远绑定到obj,即使后续再用call也无法覆盖(除非再次bind) -
new Func():创建新对象,this指向这个新实例;此时即使函数内部写了return对象,也不会影响this绑定
事件处理函数和回调中 this 容易丢失
DOM 事件监听器和异步回调(如 setTimeout、Promise.then)里,this 极易意外变成 window 或 undefined:
const btn = document.querySelector('button');
const obj = {
name: 'Bob',
handleClick() {
console.log(this.name); // 期望 'Bob',实际可能是 undefined
}
};
btn.addEventListener('click', obj.handleClick); // this 指向 btn 元素,不是 obj
- 解决办法:用
bind、箭头函数、或事件监听时用obj.handleClick.bind(obj) - React 类组件中常见问题:生命周期或事件里直接写
onClick={this.handleClick},必须在 constructor 里bind或改用箭头函数声明方法 - 注意:Vue 选项式 API 的
methods会被自动绑定,但组合式 API(setup)里定义的函数默认不绑定this,因为根本没this
真正难的不是记住规则,而是在嵌套调用、异步、解构赋值、高阶函数这些场景下快速判断当前 this 是谁。建议遇到不确定时,直接在函数开头加 console.log(this) 验证,比查文档更快。











