在前端开发中，我们经常会使用 async/await 进行异步编程，但是在编写代码的时候，我们可能会遇到 this 指向的问题。因为使用 async/await 进行异步编程，并不像传统的回调函数和 Promise 那样，this 指向并不是很明确，也不总是指向我们期望的对象，这就会导致一些意外的问题。
因此，本文将会详细介绍 async/await 中 this 指向的问题，并提供解决方案。
理解 async/await 中 this 指向的问题
在理解 async/await 中 this 指向的问题之前，让我们先来看一个例子：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ----------------
-
----- ------------ -
---------------- -- ---- -- ----------------
-
-
----- -- - --- ----------------
----------- -- --- -- ---- -- ------
---------------- -- ---------- ------ ---- -------- ------ -- ---------在上面的例子中，我们定义了一个 Person 类和两个方法：greet 和 greetAsync，在调用 greet 方法时，输出了正确的结果；但是在调用 greetAsync 方法时，却因为 this 的指向错误，导致出现了 TypeError 的异常。
那么，这是为什么呢？我们知道，当使用函数调用的时候，函数内部的 this 指向的是该函数执行时的上下文。在 greet 方法中，this 指向了 Person 的实例 p1；而在 greetAsync 方法中，this 指向了该方法内部的上下文，也就是 async 函数本身。
解决 async/await 中 this 指向的问题
既然我们已经知道了 async/await 中 this 指向的问题，那么我们如何来解决它呢？下面，我们将介绍两种解决方案。
使用箭头函数
我们知道，箭头函数的 this 指向是在定义函数的时候就被绑定的，而不是在执行函数的时候绑定。因此，我们可以使用箭头函数来解决 async/await 中 this 指向的问题。
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ----------------
-
----- ------------ -
----- ---------- - -- -- -------------
----- -------------
-
-
----- -- - --- ----------------
----------- -- --- -- ---- -- ------
---------------- -- --- -- ---- -- ------在上面的例子中，我们使用了箭头函数来绑定了正确的 this 指向，从而解决了 async/await 中 this 指向的问题。
使用 bind 方法
除了使用箭头函数外，我们还可以使用 bind 方法来绑定正确的 this 指向。需要注意的是，这种方式只适用于异步函数内部调用其他普通函数的情况。
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ----------------
-
----- ------------ -
----- ---------- - ----------------------
----- -------------
-
-
----- -- - --- ----------------
----------- -- --- -- ---- -- ------
---------------- -- --- -- ---- -- ------在上面的例子中，我们使用了 bind 方法来绑定了正确的 this 指向，从而解决了 async/await 中 this 指向的问题。
总结
在本文中，我们介绍了 async/await 中 this 指向的问题，并提供了两种解决方案：使用箭头函数和使用 bind 方法。需要根据具体的情况选择不同的解决方案。
我们希望本文对您有所帮助，让您能够更好地处理 async/await 中遇到的 this 指向问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e06f4cf6b2d6eab3b84271