在前端开发中，箭头函数已经成为了一个很常用的语法，它不仅简洁易懂，而且可以避免 this 指向问题。但是，当我们使用 Babel 将 ES6 代码转换成 ES5 代码时，箭头函数会被转换成普通函数，导致 this 的指向问题再次出现。本文将介绍如何使用 Babel 解决箭头函数转换后的 this 指向问题。
this 指向问题
在 JavaScript 中，this 的指向是非常重要的。在普通函数中，this 的指向是动态的，它取决于函数的调用方式。而在箭头函数中，this 的指向是固定的，它指向箭头函数定义时的上下文。
例如，下面的代码中，this 的指向分别是 obj 和 window：
--- --- - -
----- ------
-------- ---------- -
-----------------------
-
--
--- ------- - ------------
---------- -- ------
--- ---------- - ----------------------
------------- -- ---
--- ------------ - -- -- -
-----------------------
--
--------------- -- ------Babel 转换箭头函数后的问题
由于箭头函数的 this 指向是固定的，因此它被广泛应用于回调函数和事件处理函数中。但是，当我们使用 Babel 将 ES6 代码转换成 ES5 代码时，箭头函数会被转换成普通函数，导致 this 的指向问题再次出现。
例如，下面的代码在 ES6 中是没有问题的，但是在 Babel 转换后就会出现问题：
----- ------ -
----------------- -
--------- - -----
-
--------- -
------------- -- -
-----------------------
-- ------
-
-
----- ------ - --- ----------------
-----------------在 ES6 中，箭头函数中的 this 指向 Person 类的实例。但是，在 Babel 转换后，箭头函数中的 this 指向的是全局对象 window，因此输出的结果是 undefined。
解决方法
为了解决箭头函数转换后的 this 指向问题，我们可以使用 @babel/plugin-transform-runtime 插件。这个插件会将箭头函数转换成一个返回箭头函数的函数，从而保留箭头函数的 this 指向。
首先，我们需要安装 @babel/plugin-transform-runtime 插件：
--- ------- ---------- -------------------------------
然后，在 .babelrc 文件中添加以下配置：
-
---------- -
---------------------------------
-
-最后，我们需要在代码中引入 babel/runtime 包：
------ ----------------
这样，我们就可以在 Babel 转换后保留箭头函数的 this 指向了。例如，下面的代码在 ES6 中和 Babel 转换后都可以正常工作：
------ ----------------
----- ------ -
----------------- -
--------- - -----
-
--------- -
------------- -- -
-----------------------
-- ------
-
-
----- ------ - --- ----------------
-----------------总结
本文介绍了在使用 Babel 转换箭头函数时出现的 this 指向问题，并提供了使用 @babel/plugin-transform-runtime 插件解决这个问题的方法。在实际开发中，我们应该尽可能使用箭头函数来避免 this 指向问题，并使用 @babel/plugin-transform-runtime 插件来保留箭头函数的 this 指向。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6556e588d2f5e1655d14671e