ES6 中的类继承是一个非常强大的特性，它可以让开发者通过继承类来获取父类的属性和方法，同时还可以通过在子类中的修改来定制化自己的需求。本文将详细探讨 ES6 中的类继承用法，包括继承方式、super 作用、输出结果等方面，旨在为前端开发者提供深入的学习和指导。
继承方式
在 ES6 中，继承的方式有两种，一种是用 extends 关键词，另一种是使用 Object.setPrototypeOf。下面分别介绍这两种方式。
使用 extends
使用 extends 关键词时，我们需要创建一个子类 SubClass，并让其继承父类 ParentClass 的所有属性和方法。下面是一个简单的例子：
-- -------------------- ---- -------
----- ----------- -
----------------- -
--------- - -----
-
---------- -
------------------- - - --------- - -----
-
-
----- -------- ------- ----------- -
-------- -
----------------- - - --------- - -----
-
-
--- ------ - --- -----------------
------------------ -- ------ -----
---------------- -- ---- -----在上述例子中，我们通过关键词 extends 来让 SubClass 继承了 ParentClass 的所有属性和方法，也包括构造函数中的参数。我们实例化了一个 SubClass 的对象，可以通过这个对象调用父类和子类的方法。
使用 Object.setPrototypeOf
在 ES6 之前，我们一般采用 Object.setPrototypeOf 的方式来实现继承。下面是一个简单的例子：
-- -------------------- ---- ------- -------- ----------------- - --------- - ----- -- ------------------------------ - ---------- - ------------------- - - --------- - ----- -- -------- -------------- - ---------------------- ------ -- ----------------------------------------- ----------------------- ------------------------- - ---------- - ----------------- - - --------- - ----- - --- ------ - --- ----------------- ------------------ -- ------ ----- ---------------- -- ---- -----
在上述例子中，我们使用了构造函数 ParentClass 和 SubClass，并使用了 Object.setPrototypeOf 把 SubClass 的原型指向了 ParentClass 的原型，从而实现了继承。
super 作用
在学习 ES6 中的类继承时，另一个重要的关键字就是 super。它可以让我们在子类中对父类进行访问，调用父类的方法以及继承父类的构造函数。下面是一个简单的例子：
-- -------------------- ---- -------
----- ----------- -
----------------- -
--------- - -----
-
---------- -
------------------- - - --------- - -----
-
-
----- -------- ------- ----------- -
----------------- ---- -
------------
-------- - ----
-
---------- -
-----------------
--------------- --- -- - - -------- - -----
-
-
--- ------ - --- ---------------- ----
------------------ -- ------ ----- -- --- -- ---在上述例子中，我们使用了 Super 来访问父类，也使用了它来调用父类的方法 sayHello()。我们还在子类的构造函数中使用了一个 super 来继承父类的构造函数中的参数 name。
输出结果
最后，我们来看看这些代码的输出结果。在上面的例子中，我们都使用了 console.log() 来输出结果，下面是输出的详细结果：
Hello, Mike! My age is 18.
总结
综上所述，ES6 中的类继承是一项非常强大的特性，它可以让我们轻松地创建子类并继承父类的所有属性和方法，同时还可以使用 super 来访问父类、调用父类的方法以及继承父类的构造函数。在实际开发中，我们可以根据需要灵活选择继承方式，以便更好地完成项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1df6b83d39b488160cb1a