随着前端技术的不断发展，我们在开发中逐渐追求更加优雅、简洁、可读性高的代码，而面向对象编程已经成为实现这一目标的主要手段之一。在 ECMAScript 6（ES6）中，引入了 class 关键字来声明类，使得JavaScript开发者可以更加方便地使用面向对象编程的方式进行开发。这一特性也在 ES12 中得到了进一步增强，其中类继承是其中一个非常实用的功能。
类继承的基本概念
类继承是面向对象编程中非常重要的概念，它允许一个类从另一个类那里继承所有的属性和方法。在 JavaScript 中，类继承的概念很简单，仅需在 class 声明中使用 extends 关键字来声明一个类继承自另一个类即可。
在具体实现中，我们通常把被继承的类叫做基类（或者父类、超类），继承自基类的类叫做子类（或者派生类）。子类可继承基类的属性和方法，并且还可以根据自己的需求添加新的属性和方法。
下面是一个简单的示例代码，展示了类继承的基本概念：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- -- ---- -- ---------------
-
-
----- ----- ------- ------ -
----------------- ---- -
------------
-------- - ----
-
-------- -
--------------- --- -- --------------
-
-
----- --- - --- ------------ ----
--------------- -- ------ -- ---- -- ---
------------- -- -- --- -- --在这个例子中，我们声明了一个名为 Parent 的类，它拥有一个构造函数和一个实例方法 sayHello。然后，我们声明了另一个名为 Child 的类，它从 Parent 类继承了所有的属性和方法，并且在构造函数中增加了一个新的属性 age 和一个新的实例方法 sayAge。最后，我们使用 new 关键字来创建一个 Child 类的实例，并且使用该实例调用了 Parent 类的实例方法 sayHello 和 Child 类的实例方法 sayAge，证明了子类确实继承了父类的属性和方法并且可以使用它们。
如何 super
在上面的示例代码中，子类的构造函数中使用了 super 关键字，它的作用是调用父类的构造函数。如果子类没有指定构造函数，则会默认使用父类的构造函数来创建实例，这种情况下，在子类中使用 super 关键字可以省略。如果子类指定了自己的构造函数，则必须在其中调用 super。
在上面的示例代码中，我们可以看到 child 类声明了一个带有参数 name 和 age 的构造函数，它只需要为 age 增加一个新的属性即可，对于 name 属性，我们直接使用了父类的构造函数来实现，这是通过使用 super 来实现的。在子类的构造函数中，使用 super(name) 调用了父类的构造函数，并传递了 name 参数。通过这样的方式，子类就可以继承父类的属性和方法，并且也进一步完善了自己的构造函数。
如何覆盖（或扩展）父类的属性和方法
在子类中，我们可以自由覆盖或扩展父类的属性和方法。这通常是通过在子类中重新声明一个与父类同名的属性或方法来实现的。这个过程称为“覆盖”的父类属性或方法。
下面是一个具有覆盖的父类方法的示例代码：
-- -------------------- ---- -------
----- ------ -
---------- -
------------------ ---- ---------
-
-
----- ----- ------- ------ -
---------- -
------------------ ---- --------
-
-
----- --- - --- --------
--------------- -- ----- ---- -----在这个示例代码中，子类 Child 继承了父类 Parent 的一个实例方法 sayHello，该方法输出了一条“Hello from Parent”字符串。然而，在子类 Child 中，我们重新声明了一个具有相同名称的实例方法 sayHello，但其输出的字符串为“Hello from Child”。因此，在调用 Child 类的实例方法 sayHello 时，实际上是调用了子类的方法，而不是父类的方法。
当然，我们还可以拓展父类的方法而不是完全覆盖它。在子类方法中通过 super 调用父类方法，然后继续扩展。
下面是一个具有扩展的父类方法的示例代码：
-- -------------------- ---- -------
----- ------ -
---------- -
------------------ ---- ---------
-
-
----- ----- ------- ------ -
---------- -
-----------------
------------------ ---- --------
-
-
----- --- - --- --------
--------------- -- ----- ---- ------
-- ----- ---- -----在这个示例代码中，子类 Child 从父类 Parent 继承了一个实例方法 sayHello，该方法输出了一条“Hello from Parent”字符串。然而，在子类 Child 中，我们通过 super.sayHello() 调用了父类方法，然后使用 console.log("Hello from Child") 输出了另一条“Hello from Child”字符串。因此，在调用 Child 类的实例方法 sayHello 时，输出了两条字符串，前一条来自父类的方法，后一条来自子类的方法。
总结
类继承是 JavaScript 中一个非常重要的面向对象编程的概念。它允许一个类从另一个类那里继承所有的属性和方法，并且子类还可以根据自己的需求添加新的属性和方法。在 ES12 中，类继承得到了进一步增强，并且在实际开发中经常用到。掌握类继承的概念和实现方式对于我们写出优美、可维护的代码非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ff364295b1f8cacddd55da