在使用 ES6 类进行前端开发时，我们经常会使用到 super 关键字。super 关键字可以让我们在子类中访问父类的属性和方法，非常方便。但是，在使用 Babel 进行编译后，可能会出现一些问题。本文将介绍这些问题并提供解决方法。
问题描述
在使用 Babel 编译后的代码中，如果我们使用了 super 关键字，就会出现以下错误：
Uncaught ReferenceError: this is not defined
这是因为在编译后，代码中的 this 已经被替换为了另一个变量，导致 super 关键字无法正确访问父类的属性和方法。下面是一个示例代码：
-- -------------------- ---- -------
----- ------ -
------------- -
--------- - ---------
-
--------- -
-----------------------
-
-
----- ----- ------- ------ -
------------- -
--------
-------- - -------
-
--------- -
----------------
----------------------
-
-
--- ----- - --- --------
----------------在编译后的代码中，这段代码会变成：
-- -------------------- ---- -------
---- --------
-------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - -
-------- -------------------------------- ----- - -- ------- - ----- --- -------------------- ------ ---- ----------- - ------- ------ ---- --------- - ------ ---- -- ------- ---- --- -------- -- ------ ---- --- ----------- - ---- - ----- -
-------- ------------------- ----------- - -- ------- ---------- --- ---------- -- ---------- --- ----- - ----- --- ---------------- ---------- ---- ------ -- ---- -- - --------- --- - - ------ ------------ - ------------------ - ------------------------ -- --------------------- - ------------ - ------ --------- ----------- ------ --------- ----- ------------- ---- - --- -- ------------ --------------------- - ------------------------------- ----------- - ------------------ - ----------- -
--- ------ - -------- -------- -
--------------------- --------
--------- - ---------
--
------------------------ - -------- --------- -
-----------------------
--
--- ----- - -------- --------- -
---------------- ---------
-------- ------- -
--------------------- -------
--- ----- - -------------------------------- ---------------- -- ------------------------------------------
--------- - -------
------ ------
-
------ ------
----------
----------------------- - -------- --------- -
--- ------ - -----
------------------------------ -- --------------------------------------- ---------- -----------------
----------------------
--
--- ----- - --- --------
----------------这段编译后的代码中，父类的构造函数被删掉了，而子类中的 this 也被替换成了另一个变量 _this2。因此，在调用 super.getName() 方法时，就会出现 this 未定义的错误。
解决方法
为了解决这个问题，我们需要使用 Babel 插件 "@babel/plugin-proposal-class-properties" 或者 "@babel/plugin-transform-runtime"。这两个插件可以保留类的构造函数和 this 的指向，从而避免出现 super 关键字无法使用的问题。
使用 @babel/plugin-proposal-class-properties 插件
首先，我们需要安装 "@babel/plugin-proposal-class-properties" 插件：
npm install --save-dev @babel/plugin-proposal-class-properties
接下来，在项目的 .babelrc 文件中添加以下配置：
{
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}这样，在编译后的代码中，就可以正确地访问父类的属性和方法了。
使用 @babel/plugin-transform-runtime 插件
另一种解决方法是使用 "@babel/plugin-transform-runtime" 插件。这个插件会将编译后的代码中的公共部分提取出来，防止代码冗余，并在运行时注入一些帮助函数。安装方法如下：
npm install --save-dev @babel/plugin-transform-runtime
然后，在 .babelrc 文件中添加以下配置：
{
"plugins": [
"@babel/plugin-transform-runtime"
],
"presets": [
"@babel/env"
]
}注意，在使用这个插件之前，你需要安装 "@babel/runtime" 包并将其添加到依赖项中：
npm install --save @babel/runtime
总结
在使用 ES6 类时，我们经常会使用 super 关键字来访问父类的属性和方法。但是，在使用 Babel 编译后，可能会出现 this 未定义的错误。为了解决这个问题，我们可以使用 "@babel/plugin-proposal-class-properties" 或者 "@babel/plugin-transform-runtime" 插件。这些插件可以保留类的构造函数和 this 的指向，避免出现 super 关键字无法使用的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ee985bf6b2d6eab388ea24