JavaScript第 22 篇，ES6中的 class 关键字和 super 关键字，使用详细（class类和super()方法）

前言

在ES6中，我们可以使用 class 关键字来定义类，并通过 extends 关键字实现类的继承，然后在子类中，我们可以使用 super 关键字来调用父类的构造函数。今天就来记录一下它们的基本使用

一. 定义父类

首先，使用class关键字，定义一个父类，请看

这里定义一个名为Fatherfn的class类，类名字首字母要大写

class Fatherfn{ 

    // constructor是默认构造方法，不能修改
    constructor(name) { 
        this.name = name;
                     }
    // 父类中的eat()方法
    eat() { 
        console.log(`${this.name} is eating.`);
        }

   }

二. 继承父类

然后再定义一个子类，通过extends、super()方法，继承父类名为Fatherfn的class类，请看

这里再定义一个名为Son的class类，并通过extends继承上面名为Fatherfn的类

// 这里继承extends Fatherfn ，继承父类属性
class Son extends Fatherfn { 

        // constructor是默认构造方法，不能修改
        constructor(name, hobby) {
                // 结合super()方法, 这样就可以继承调用父类的构造函数
                super(name); 
                this.hobby= hobby;
                                 } 
        // 子类中的drink()方法 
        drink() { 
                console.log(`${this.name} is drinking.`); 
                } 

    }

三. 赋值调用

最后，创建一个子类的实例对象，并赋值，请看

const demoFn = new Son("Buddy", "study");

// 调用子类的方法 
demoFn.eat(); 
// 输出：Buddy is eating. 

demoFn.drink(); 
// 输出：Buddy is drinking.

可以看到这里既可以使用父类函数中的eat()方法，也可以使用子类函数中的drink()方法。

四. 注意事项

1. class关键字，命名的函数，名字首字母要大写（要求，但不强制）；

2. 每一个class类里面都有一个 constructor 构造方法，这个方法名字不能修改；

3. class类中，无法使用es5的function()写法。

五. 小结

1. ES6中的class类继承和super()用法可以实现类与类之间的继承关系，然后通过extends关键字，子类可以继承父类的属性和方法。

2. 在子类的构造函数中，使用super()关键字调用父类的构造函数，并传递相应的参数。这样可以实现代码的复用和扩展，提高代码的可读性和可维护性。

感觉有用，就一键三连，感谢(●'◡'●)