随着 JavaScript 的发展，ES6 引入了类(class)的概念，使得代码的组织和维护更加方便和规范。类在代码复用和面向对象编程方面发挥着重要作用，在实践中，类的继承和 super 关键字是我们需掌握的 JavaScript ES6 中的一门基础技能。
1. 继承
对于面向对象编程(OOP)，继承是重要的一环，它允许一个子类继承父类的一些行为。在 ES6 中，我们可以使用以下语法来实现继承:
-- -------------------- ---- -------
----- ------ -
------------------- -
----------- - -------
-
-
----- --- ------- ------ -
------------------- ------- -
--------------
----------- - -------
-
-上述代码实现了 Son 类继承 Father 类，通过关键字 extends 实现。我们看下 constructor() 函数的实现：
- 在 Son 类中，super(value1) 调用了父类的 constructor() 函数，value1 参数被传入将其作为 Father 类的实例初始化，也就是说父类的实例被声明。
- 在 Son 类中，value2 参数创建了 Son 类的实例。
需要注意的是，如果我们没有在子类中使用 constructor() 函数，那么 JavaScript 将自动为我们创建一个默认的 constructor():
class Son extends Father {
// 自动创建默认的 constructor()
}2. super
上述 super 关键字已经简单地使用了一次，默认调用父类的构造函数。除此之外，super 还可以用在如下方面：
1. 访问父级属性
在子类中使用 super. 可以访问父级的属性和方法：
-- -------------------- ---- -------
----- ------ -
------------- -
-------- - ---
-
---------- -
----------------------
-
-
----- --- ------- ------ -
------------- -
--------
---------------------- -- -------
----------------- -- -----------
-
-上述代码中，使用 super 调用了父类中的 constructor() 和 sayHello()。
2. 调用父级方法
在子类中使用 super. 调用父级的方法：
-- -------------------- ---- -------
----- ------ -
------------- -
-------- - ---
-
---------- -
----------------------
-
-
----- --- ------- ------ -
------------- -
--------
-
---------- -
----------------- -- -----------
-
-
----- --- - --- ------
---------------上述代码中，子类 Son 的 sayHello() 调用了父类 Father 的 sayHello() 方法。
3. 留意 this
在继承中，需要注意 this 的指向问题。当在子类中要引用 this 时，我们要谨慎使用。比如：
-- -------------------- ---- -------
----- ------ -
------------- -
---------- - --
-
------ -
------------------------
-
-
----- --- ------- ------ -
------------- -
--------
---------- - --
-
------ -
------------------------
-------------
-
-
----- --- - --- ------
-----------上述代码中，子类 show() 中使用了 super.show()，依旧是调用了父类 Father 的 show() 方法。值得注意的是，子类 Son 中的 this.value 覆盖了父类 Father 中的 this.value，发现其输出结果为 2 和 1。
结论
通过以上的示例，我们可以总结出几个关于 ES6 中类继承和 super 关键字的使用方式：
- 在子类中，使用
extends实现继承。 - 在子类的
constructor()中使用super()调用父类的constructor()。 - 在子类中，可以通过
super.访问父级的属性和方法。 - 子类中也可以和父类命名相同的方法和属性，以此覆盖父类的方法和属性。
- 子类中使用
super.可以调用父类的同名方法，以实现构造父类的对象。 - 在使用
super时需要注意 this 的指向。
ES6 中类的继承和 super 的使用有很多细节，需要我们在实践中不断了解和使用。这些知识点是基础的，但是依然是我们必须给前端领域的学习者提供的重要知识。顺带一提，在 Vue、React、Angular 等框架的使用中，类似的继承和 super 关键字经常运用到，学好这些知识是非常有必要的。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c322dc83d39b488171480b