ES6 中的 class super extends 用法详解

1. class

class 关键字用于定义类，它可以将一组相关的属性和方法组织在一起。类的语法如下：

class ClassName {
  // 属性
  propertyName = value;

  // 构造函数
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }

  // 实例方法
  methodName() {
    // 方法体
  }

  // 静态方法
  static staticMethodName() {
    // 方法体
  }
}

2. extends 关键字

extends 关键字用于指定子类与父类的关系，子类可以继承父类中的属性和方法。类的语法如下：

class ChildClass extends ParentClass {
  // 属性
  childProperty = value;

  // 构造函数
  constructor(param1, param2) {
    super(param1, param2);
    this.childProperty = value;
  }

  // 实例方法
  childMethod() {
    // 方法体
  }
}

3. super 关键字

super 关键字用于访问父类中的属性和方法。super 可以作为函数调用，也可以作为表达式使用。

3.1 super() 函数调用

super() 函数调用用于在子类的构造函数中调用父类的构造函数。例如：

class ChildClass extends ParentClass {
  constructor(param1, param2) {
    super(param1, param2);
    this.childProperty = value;
  }
}

3.2 super 表达式

super 表达式用于访问父类中的属性和方法。例如：

class ChildClass extends ParentClass {
  childMethod() {
    return super.parentMethod();
  }
}

4. 实例方法和静态方法

4.1 实例方法

实例方法是属于类的实例的方法，可以通过类实例来调用。实例方法的语法如下：

class ClassName {
  methodName() {
    // 方法体
  }
}

const instance = new ClassName();
instance.methodName();

4.2 静态方法

静态方法是属于类的静态方法，可以通过类本身来调用。静态方法的语法如下：

class ClassName {
  static staticMethodName() {
    // 方法体
  }
}

ClassName.staticMethodName();

5. 总结

ES6 中的 class、super、extends 等关键字提供了强大的面向对象编程特性，使得 JavaScript 的编程更加简洁和易读。通过这些关键字，我们可以轻松地实现类的继承、构造函数、实例方法和静态方法，从而编写出更加复杂和健壮的代码。