随着前端开发的迅猛发展，ES6 成为了前端开发的重要标准之一。ES6 中引入了类的概念，这让前端开发更加面向对象。在这篇文章中，我们将讨论 ES6 中类的继承及其常见问题。
类的继承
在 ES6 中，我们使用 class 关键字来定义一个类。类定义中可以包含构造函数、成员变量、成员函数等。ES6 中的类也支持继承操作。我们可以通过 extends 关键字来实现类的继承。
首先，定义一个父类 Animal：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- --- ----------------
-
-然后，定义一个子类 Cat，继承自 Animal：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- -
------------
-
---------- -
-----------------
---------------------
-
-子类中使用 super 关键字调用父类的构造函数和方法。上面的代码中，Cat 继承了 Animal 类的成员变量和成员函数，同时也新增了自己的成员函数 sayHello。
接下来我们可以创建一个 Cat 的实例，并调用它的成员函数：
const myCat = new Cat("Tom");
myCat.sayHello(); // Hello, I'm Tom. Meow~这样，我们就成功地实现了类的继承。
常见问题
在使用 ES6 中的类继承时，也会遇到一些常见问题。下面，我们将讨论这些问题并给出解决方案。
1. 子类没有自己的 this 对象
在 ES6 中，子类中的 this 指向父类的实例。子类无法在自己的构造函数中创建自己的 this 对象。因此，如果你想在子类的构造函数中给子类添加成员变量，你需要调用父类的构造函数，然后才能使用 this 对象。
例如，在 Cat 类的构造函数中添加一个成员变量 color：
-- -------------------- ---- -------
----- --- ------- ------ -
----------------- ------ -
------------
---------- - ------ -- -- ---- --------
-
---------- -
-----------------
---------------------
-
-2. 子类的构造函数中必须调用 super 函数
在继承中，子类必须调用 super 函数，以便父类的成员变量和成员函数得以初始化。如果子类没有调用 super 函数，将会报错。
class Cat extends Animal {
constructor(name) {
// super 未调用，报错
this.name = name;
}
}3. 继承树中存在多个 super 函数
如果子类的继承树中存在多个父类，则子类中的 super 关键字会调用其靠近子类的父类的同名函数。
-- -------------------- ---- -------
----- ------ -
------------- -
----------------------
-
-
----- ---- ------- ------ -
------------- -
--------------------
-------- -- -- ------ -----
-
-
----- ------ ------- ---- -
------------- -
----------------------
-------- -- -- ---- -----
-------------------- -- -- ------ -----
-
-在上面的代码中，实例化 Parrot 时，控制台将会依次输出 Parrot、Bird、Animal。
总结
ES6 中类的继承使前端开发更加面向对象。在类的继承中，子类中的 super 关键字可以初始化父类的成员变量和成员函数。但是，使用类时也会遇到一些常见问题，如子类中没有自己的 this 对象、必须调用 super 函数、继承树中存在多个 super 函数。这些问题虽然有些棘手，但我们可以通过深入学习，掌握类的继承原理及其相应解决方案，从而写出高质量的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64662d08968c7c53b06d1a3f