async函数的this绑定遵循JavaScript原有规则,取决于调用方式而非async/await语法;直接调用时this为undefined或全局对象,方法调用时指向调用对象,bind/call/apply可显式绑定,箭头函数包裹则继承外层this,await不改变this值。

异步函数(async function)本身不改变 this 的绑定规则,它的 this 指向完全取决于**函数如何被调用**,而不是因为用了 async 或 await。也就是说,async 只是语法糖,底层仍是普通函数,this 仍遵循 JavaScript 原有的绑定机制。
普通 async 函数的 this 由调用方式决定
和普通函数一样,async 函数中的 this 在运行时才确定,取决于它被谁调用、怎么调用:
- 直接调用
foo()→this是undefined(严格模式)或全局对象(非严格模式) - 作为方法调用
obj.foo()→this指向obj - 通过
call/apply/bind显式绑定 →this以绑定为准 - 箭头函数包裹的 async 函数会继承外层
this,但箭头函数本身不能用async修饰(async () => {}是合法的,此时this来自外层作用域)
await 不会影响 this 绑定
await 只是暂停当前函数执行、让出线程,并在 Promise 解决后恢复执行。它不会创建新执行上下文,也不会重置或修改 this。函数恢复后,this 仍保持挂起前的值。
例如:
立即学习“Java免费学习笔记(深入)”;
const obj = {
name: 'Alice',
async greet() {
console.log(this.name); // 'Alice'
await new Promise(r => setTimeout(r, 10));
console.log(this.name); // 仍是 'Alice',未丢失
}
};
obj.greet();
常见 this 丢失场景及修复方式
容易出问题的地方不是 async 本身,而是把异步方法赋值给变量或传入回调时丢失了调用上下文:
-
错误写法:
const fn = obj.greet; fn();→this不再是obj -
修复方式 1:使用
bind——const fn = obj.greet.bind(obj); -
修复方式 2:改用箭头函数包装(注意:箭头函数内调用
obj.greet(),而非定义 async 箭头函数) -
修复方式 3:类中用字段语法 + 箭头函数(ES2022+):
greet = async () => { ... },自动绑定this
构造函数或 class 中的注意事项
在 class 方法中声明 async greet() { ... },其 this 指向实例,和普通方法一致。但若该方法被解构或作为事件处理器传入(如 button.addEventListener('click', obj.greet)),仍会丢失 this。推荐在 constructor 中绑定,或使用事件处理器包装:
class Counter {
constructor() {
this.count = 0;
this.handleClick = this.handleClick.bind(this);
}
async handleClick() {
this.count++; // this 安全
await fetch('/api');
}
}


















