随着 ES6 的推广，箭头函数越来越常见。然而，箭头函数会改变 this 的指向，这可能会导致一些难以理解的错误。本文将介绍如何解决 Babel 编译箭头函数后 this 指向问题。
问题描述
在 JavaScript 中，this 的值由调用它的函数决定。箭头函数不同于普通函数，它没有自己的 this，箭头函数内部的 this 值只取决于外层作用域中的 this。在箭头函数内部，this 始终指向的是定义箭头函数时所在的对象，而非执行时所在的对象。这种特性使得箭头函数非常适合编写回调函数和简化代码。
--- --- - -
----- --------
-------- ---------- -
-----------------------
--
------------- -- -- -
-----------------------
-
--
-------------- ---- -------
------------------- ---- -----------在上面的例子中，sayName 方法使用普通函数的语法，正常输出了 obj 的 name 属性。而 sayNameArrow 方法使用箭头函数的语法，输出了 undefined。
这个问题可归为箭头函数和普通函数的 this 指向问题。然而，由于 Babel 的编译，我们还需要考虑转换后的函数的 this 指向问题。
解决问题
解决方案一：避免使用箭头函数
如果你在编写代码时发现箭头函数的 this 指向问题让你感到挫败，那么你可以尝试避免使用箭头函数，使用普通函数来代替。
--- --- - -
----- --------
-------- ---------- -
-----------------------
--
---------------- -----------
-----------------------
-
--
-------------- ---- -------
---------------------- ---- -------解决方案二：使用 bind 方法
bind 方法返回一个新的函数，且内部的 this 指向被绑定到函数的第一个参数上。因此，可以使用 bind 方法将箭头函数转换为普通函数，通过绑定 this 来解决问题。
--- --- - -
----- --------
-------- ---------- -
-----------------------
--
------------- -- -- -
-----------------------
--
----------------- -----------
------
-----------------------
----------------
-
--
-------------- ---- -------
------------------- ---- -----------
----------------------- ---- -------在上面的例子中，我们使用了 bind 方法将箭头函数转换为普通函数，并将 this 绑定到 obj 上。这样，箭头函数中的 this 便与 obj 中的 this 相同，输出了正确的值。
解决方案三：使用 that 或者 self 代替 this
这是绕过箭头函数指向问题的一种常用技巧。我们可以在函数外部定义一个变量，并将箭头函数内部的 this 赋值给该变量，然后在箭头函数中使用该变量来代替 this，来解决问题。
--- --- - -
----- --------
-------- ---------- -
-----------------------
--
----------------- -----------
--- ----------
------
-----------------------
-----
--
----------------- -----------
--- ----------
------
-----------------------
-----
-
--
-------------- ---- -------
----------------------- ---- -------
----------------------- ---- -------在上面的例子中，我们定义了两个变量 self 和 that，分别代表了箭头函数外部 this 指向的对象。在箭头函数内部，我们使用了这两个代表对象的变量，来输出正确的值。
总结
本文介绍了箭头函数和普通函数在 this 指向上的差异，并且提供了三种解决方案来解决 Babel 编译箭头函数后 this 指向问题。建议在使用箭头函数时审慎考虑其 this 指向的问题，并根据具体场景选择合适的解决方案。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a10dc448841e9894d52df2