在现代前端开发中，使用 ES6 的类和继承已经成为了一种标准的实现方式。然而，在不同的浏览器和 JavaScript 引擎中，对于 ES6 的支持程度是不一样的，这就需要使用 Babel 对代码进行编译，以保证代码的兼容性。本文将从 Babel 编译后的代码入手，深入理解 ES6 的类和继承，并提供相关的示例代码。
1. 类的定义
在 ES6 中，类的定义使用 class 关键字，如下所示：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-上面的代码定义了一个名为 Animal 的类，该类具有一个构造函数和一个 sayHello 方法。其中，构造函数用于初始化对象的属性，而 sayHello 方法用于输出对象的信息。在 Babel 编译后的代码中，以上代码会被转译为如下所示的函数：
-- -------------------- ---- -------
-------- ------------------------- ------------ -
-- ----------- ---------- ------------- -
----- --- ----------------- ---- - ----- -- - -----------
-
-
--- ------ - -------- ------------ -
--------------------- --------
--------- - -----
--
------------------------- - -------- -- -
------------------- -- ---- -- - - -----------
--可以看到，Babel 编译后的代码将 class 定义转换为了一个函数，其中 _classCallCheck 函数用于判断该函数是否通过 new 关键字调用，如果没有，则抛出一个错误。在类中定义的方法则通过原型链的方式进行实现。
2. 继承的实现
在 ES6 中，继承使用 extends 关键字，如下所示：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- ------ -
------------
---------- - ------
-
------ -
------------------ --- - ------------- ----- ---------------
-
-上面的代码定义了一个名为 Dog 的类，该类继承自 Animal 类，并具有一个构造函数和一个 bark 方法。其中，构造函数使用 super 关键字调用父类的构造函数进行初始化，并添加了一个名为 breed 的属性。而 bark 方法则输出狗的信息。在 Babel 编译后的代码中，以上代码会被转译为如下所示的函数：
-- -------------------- ---- -------
--- --- - --------------------- --------- -
-------------- ---------
-------- --------- ------ -
--- ------
--------------------- -----
----- - -------------------------------- ------------------------------- -------
----------- - ------
------ ------
-
----------------- --
---- -------
------ -------- ------ -
------------------ --- - - - ---------- - - ----- - - -----------
-
----
------ ----
----------可以看到，Babel 编译后的代码使用了 _inherits 函数实现了类的继承，而 _createClass 函数则用于定义类中的方法。
3. 示例代码
下面是一个完整的示例代码，展示了如何使用 ES6 的类和继承：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- --- ------- ------ -
----------------- ------ -
------------
---------- - ------
-
------ -
------------------ --- - ------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------