在 JavaScript 中使用 Promise 进行异步编程时，经常会遇到 this 指向混乱的问题，特别是在将回调函数传递给 then() 方法时。这会导致代码出现不可预期的行为，从而导致程序出错。在本文中，我们将深入探讨 Promise 中 this 指向的问题，并提供一些解决方案和实用的提示。
问题来源
Promise 对象的 then() 方法接受两个参数，一个是成功的回调函数，另一个是失败的回调函数。当 Promise 对象的状态变为已解决或已拒绝时，执行相应的回调函数，并将该函数的返回值作为新的 Promise 对象的值。然而，当回调函数中使用 this 关键字时，它的指向可能不是我们想象中的对象，导致代码出现不可预期的行为。让我们看一下下面的示例代码：
-- -------------------- ---- -------
----- --- - -
------ --
---------- -
------ -----------
-
--
----- ------- - --- ----------------- ------- -- -
----------
---
----------------------- -
---------- - --
---------------------------- -- -
--------------------- -
---------------------------- -- -
---在此示例中，我们定义了一个计数器对象 obj，并在其内部定义一个 getCount() 方法，该方法返回 count 属性的值。然后，我们创建了一个 Promise 对象，该对象的状态立即变为已解决状态。
在 promise.then() 方法中，我们使用了普通函数来定义一个回调函数，它将 this.count 设置为 1，并调用 getCount() 方法以打印 count 属性的值。我们期望输出 1，但实际输出是 0。这是由于在回调函数中，this 关键字并不是指向 obj 对象，而是指向了 Promise 对象的上下文。
解决方案
为了解决 Promise 中 this 指向的问题，有以下几种解决方案：
使用箭头函数
使用箭头函数可以解决 this 指向的问题。箭头函数不会创建自己的上下文，而是将 this 关键字引用到父上下文的作用域链中。因此在代码中使用箭头函数可以确保 this 关键字的正确性。下面是修改后的示例代码：
-- -------------------- ---- -------
----- --- - -
------ --
---------- -
------ -----------
-
--
----- ------- - --- ----------------- ------- -- -
----------
---
--------------- -- -
---------- - --
---------------------------- -- -
--------------------- -
---------------------------- -- -
---在此示例中，我们将回调函数改为箭头函数，并且可以正确地设置 count 属性的值。
使用 bind 方法
JavaScript 中的函数对象提供了一个 bind() 方法，该方法返回一个新函数，其中的 this 关键字绑定到指定的对象上。我们可以使用 bind() 方法来解决 Promise 中 this 指向的问题。下面是修改后的示例代码：
-- -------------------- ---- -------
----- --- - -
------ --
---------- -
------ -----------
-
--
----- ------- - --- ----------------- ------- -- -
----------
---
----------------------- -
---------- - --
---------------------------- -- -
------------------------------- -
---------------------------- -- -
---在此示例中，我们将回调函数中的 this 关键字绑定到 obj 对象上，从而可以正确地设置 count 属性的值。
缓存 this 关键字
另一个解决方案是缓存 this 关键字。我们可以在该对象的上下文中将 this 关键字存储到一个变量中，然后在回调函数中使用该变量来引用对象。下面是修改后的示例代码：
-- -------------------- ---- -------
----- --- - -
------ --
---------- -
------ -----------
-
--
----- ------- - --- ----------------- ------- -- -
----------
---
----- ---- - -----
----------------------- -
---------- - --
---------------------------- -- -
--------------------- -
---------------------------- -- -
---在此示例中，我们将 this 关键字存储到了一个名为 self 的变量中，并在回调函数中使用 self 引用 obj 对象。这样做可以确保 this 关键字指向正确的对象。
总结
在 JavaScript 中使用 Promise 进行异步编程是很常见的做法，但其回调函数中的 this 关键字可能引起代码出现不可预期的行为。上述解决方案可以确保 this 关键字的正确性，从而使代码更加健壮和可靠。使用这些技巧可以使你在编写 Promise 相关代码时更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472e944968c7c53b0074951