Promise.prototype.then()中this指向的内幕

2023-09-07 22:36:34

导语

在JavaScript的异步编程世界中，Promise是一个不可或缺的利器。它允许我们以链式调用的方式优雅地处理异步操作。在Promise.prototype.then()方法中，this指向的理解尤为重要。它决定了回调函数的执行上下文，进而影响异步操作的执行流程。

this的指向

当我们调用Promise.prototype.then()方法时，then()方法中的this指向实际执行该then()方法的Promise实例。这意味着，无论then()方法是在Promise实例上直接调用，还是在then()方法的链式调用中调用，this始终指向调用该then()方法的Promise实例。

例如：

const promise = new Promise((resolve) => resolve(42));

promise.then(function(value) {
  console.log(this === promise); // true
});

thenable对象

在某些情况下，我们可能需要将一个非Promise对象转换为thenable对象，以便能够使用then()方法。thenable对象是一个拥有then()方法的对象。当我们调用非Promise对象的then()方法时，this指向该非Promise对象本身。

例如：

const obj = {
  then: function(onFulfilled) {
    onFulfilled(42);
  }
};

obj.then(function(value) {
  console.log(this === obj); // true
});

执行上下文

this指向的理解对于理解Promise的执行上下文至关重要。当then()方法中的回调函数被调用时，执行上下文被设置为回调函数本身。这意味着，回调函数中的this指向回调函数的执行上下文，而不是调用then()方法的Promise实例。

例如：

const promise = new Promise((resolve) => resolve(42));

promise.then(function() {
  console.log(this === global); // true
});

回调函数

then()方法中的回调函数负责处理异步操作的返回值。回调函数的第一个参数通常表示异步操作的返回值，而第二个参数通常表示异步操作的异常。

当回调函数被调用时，this指向回调函数的执行上下文。这意味着，我们可以通过回调函数中的this来访问回调函数的执行上下文中的变量和方法。

例如：

const context = {
  value: 42
};

promise.then(function() {
  console.log(this.value); // 42
}, function() {
  console.log(this.value); // undefined
});