简介
@babel/helper-replace-supers是babel的一个helper包，用于将ES6+ class中的this.super转换为正确的值。这个包的使用是相对简单，但它的实现涉及深入的JavaScript特性和编译原理知识。在本文中，我们将从多个方面详细介绍@babel/helper-replace-supers的使用和实现，为前端开发者提供具有深度和实用指导的帮助。
安装和基本用法
使用npm安装@babel/helper-replace-supers：
npm i @babel/helper-replace-supers
在babel的插件中引用@babel/helper-replace-supers：
-- -------------------- ---- -------
-------------- - -------- ------- -
----- - ------ - - - ------
------ -
-------- -
----------- -
---------------
---------------------- -
----- - ------- --------- -------- - - ----------
-- -------------- --- -------- -
----- ---- - -------------------------- -------------------------- ----------
-----------------------
-
-
---
-
-
--
--这里介绍的是一个比较全面的使用方式，它可以将所有ES6+ class中的this.super替换为正确的值。本文后面将分别介绍该实现的具体过程和实现中涉及的JavaScript特性。
用例详解
为了更好的理解@babel/helper-replace-supers的使用和原理，我们需要针对具体的用例，来进行深入分析。这里我们以一个示例代码为例，并对代码中的各个部分进行详细介绍。
-- -------------------- ---- -------
----- --- -
----------------- ------ -
--------- - -----
---------- - ------
-
------- -
--------------------- ------------ ----------------
-
-
----- ----- ------- --- -
------------------ -
-------------- -------
-
------- -
--------------
------------------ -- ----------
-
-本示例代码定义了一个Car类和一个Tesla类，Tesla类继承自Car类。我们来逐步分析代码中的各个部分：
class定义
在ES6+中，class定义是一个相对复杂的语法糖。可以简单的理解为是基于prototype的语法封装。在代码中，我们可以通过查看Babel的实际输出，来理解class定义的实际效果：
-- -------------------- ---- -------
-- ----
-------- --------- ------ -
--------- - -----
---------- - ------
-
------------------------------------ -------- -
----------- ------ --------- ----- ------------- ----- ------ -------- ------- -
--------------------- ------------ ----------------
-
---
-- ------
-------- ------------ -
--- ------
-------------- -------- -------
----- - -----
--------------------------- -------- -
----------- ------ --------- ----- ------------- ----- ------ -------- ------- -
--------------------------------
------------------ -- ----------
-
---
-
--------------- - ---------------------------- -
------------ -
------ ------
----------- ------
--------- -----
------------- ----
-
---在此代码中，我们可以看到，实际上class定义是基于函数和原型的封装，和ES5+的构造函数和原型非常相似。
super的使用
super在class中是一个非常关键的关键字，它用于父类和子类中的方法和属性访问。在上面的代码中，我们可以看到super的两种使用方式：
- 在子类的constructor中调用父类的constructor：
super('Tesla', model) - 在子类的start方法中调用父类的start方法：
super.start()
看似简化了代码，但在实际上执行的过程中，它将带来很多难以发现的问题，比如使用了箭头函数的class中，super无法绑定父类的this；在重复调用super的代码中，可能带来性能问题；而且由于super机制的实现，super的行为也是很难摸清楚的。因此，@babel/helper-replace-supers可以帮助我们消除这些隐藏的问题。
@babel/helper-replace-supers的替换
@babel/helper-replace-supers主要就是用于替换class中的this.super的值，保证它们不会导致上述问题。因此，我们来一步一步分析一下，在示例代码中如何使用babel-plugin-transform-decorators进行转换。
在使用babel-plugin-transform-decorators的过程中，我们需要使用如下的babel配置：
{
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-decorators"],
"presets": ["@babel/preset-env"]
}其中@babel/plugin-proposal-class-properties用于支持静态类属性，@babel/plugin-proposal-decorators用于支持装饰器语法。然后我们来看看上述代码中在使用@babel/helper-replace-supers的过程中，babel替换了哪些代码。
-- -------------------- ---- -------
-- -----
------------------ -
-- ---------
--- ------
----- - ---------------- ---------
--------------------------- -------- -
----------- -----
--------- -----
------ ---- -
---
---------- - ------
------ ------
-
------- -
-- ---------
----- ------ - ------------------- -
------ -
----- -
------ ---------------------------------------------
--
------------- ----
-
---
------------------------
------------------ -- ----------
-
-- -----在上述代码中，我们可以看到，在构造函数中，@babel/helper-replace-supers使用了ES5+中的call方法，来将父类的构造函数回调，并将$this作为传入的this对象。由于super的实现机制，它会将当前方法转换为一个计算属性并动态绑定父类的方法。因此，在调用super的过程中，我们需要保证super所指向的方法，和当前的this同样指向当前对象。那么问题来了，什么是$this对象？在ES6中，$this 实际上是this，而在ES5+中，它就是当前对象，通过call函数调用，赋值给了this。
在start方法中，替换的代码稍微复杂一点。我们可以看到，@babel/helper-replace-supers用了一个基于对象属性的方法，来动态地绑定父类的方法this.start。它首先创建了一个空的对象null，然后在对象中动态生成一个属性start，属性的get函数指向了父类的start方法。最后我们调用_super.start.call(this)来调用绑定的方法，达到了消除函数调用隐式绑定的目的。
实现细节
@babel/helper-replace-supers的实现中，涉及到相当多的JavaScript特性和编译原理知识。在阅读本文的过程中，我们已经简单地介绍了@babel/helper-replace-supers的工作原理和实现方法。在这里，我们再通过几个角度，来详细介绍该包的更多实现细节。
- 在对super进行转义之前，需要对class进行一次遍历操作，用于确定当前位置是否为super的调用位置。@babel/traverse模块被用于实现遍历操作。通过该模块提供的这样的方法，我们可以对代码进行细微的解析，同时，也可以很好地处理代码中的各类语法糖。
-- -------------------- ---- -------
----- - ------ - - - ------
----- - -------- - - ---------------------------
-------------- - ---------- -
------ -
-------- -
----------- -
---------------
---------------------- -
----- - ------- --------- -------- - - ----------
-- -------------- --- -------- -
-- ----- ------- -----
-
-
---
-
-
--
--- 对于constructor方法的处理，需要找到所有super的调用，并用call方法代替原有的函数调用。call方法也是JS中的一个非常重要的方法，通过这个方法，我们可以显示的定义this的绑定方式，帮助消除各类隐式绑定导致的Bug和问题。
-- -------------------- ---- -------
---------------
-------------------- -
----- - ------- ---------- ---- - - ----------
-- -
-----------------
-- -----------
-- ---------------------------
- -
-- ------- ----- ---- ----
----- ---- - -----------------
-------------------
-------------------
-------------------
---------------------------
--
--------------------
--
----
--
-----------------------
-
-
---- 对于方法的处理，@babel/helper-replace-supers基于了动态绑定的思想。这样的实现更为优雅，同时也很好地保留了代码的原有结构。与此相对，@babel/helper-replace-supers并没有去实现更为复杂的函数绑定即Reflect.apply，它的实现机制相对而言更为简单。
-- -------------------- ---- -------
---------------
---------------------- -
----- - ------- --------- -------- - - ----------
-- -------------- --- -------- -
-- ------- ----- ----
----- ---- - -------------------
-------
--------------------------
--------
--
-----------------------
-
-
---总结
@babel/helper-replace-supers是babel中的一个基础工具包，它能够消除在ES6+ class中，通过使用super关键字所引入的隐式绑定问题。在本文中，我们从多个角度详细介绍了该package的使用和实现，希望这些能够帮助前端开发者更好地了解和运用@babel/helper-replace-supers，也希望这篇文章能够给广大读者带来一些新的思想和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/98601