ES6 的 class 类的使用方法及其继承方式

在 ES6 中，class 类是一种新的语法糖，使得 JavaScript 中的面向对象编程更加方便和直观。本文将介绍 ES6 中 class 类的使用方法及其继承方式，包含详细的示例代码和学习指导。

class 类的基本语法

class 类的基本语法如下：

class MyClass {
  constructor() {
    // 构造函数
  }

  method1() {
    // 实例方法
  }

  static method2() {
    // 类方法
  }
}

其中 constructor 方法是类的构造函数，用于创建和初始化实例对象。实例方法直接定义在类的原型上，可以被实例对象调用。类方法使用 static 关键字定义，类似于静态方法，可以直接通过类名调用，不能被实例对象调用。

创建类的实例对象和调用实例方法的语法如下：

let obj = new MyClass();
obj.method1();

调用类方法的语法如下：

MyClass.method2();

ES6 中的继承

使用 extends 关键字，可以实现类的继承。子类可以继承父类的属性和方法，也可以重写父类的方法。子类的 constructor 方法中必须调用 super() 方法，否则会报错。

示例代码如下：

class Parent {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, I am ${this.name}.`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, I am ${this.name}, ${this.age} years old.`);
  }

  sayBye() {
    console.log(`Bye.`);
  }
}

let parent = new Parent("Jenny");
let child = new Child("Tom", 8);
parent.sayHello(); // Output: Hello, I am Jenny.
child.sayHello(); // Output: Hello, I am Tom, 8 years old.
child.sayBye(); // Output: Bye.

在上面的示例代码中，Parent 类定义了一个属性 name 和一个实例方法 sayHello()。Child 类继承了 Parent 类，并新增了一个属性 age 和一个实例方法 sayBye()。子类的 constructor 方法中调用了 super(name)，这是因为 Parent 类的构造函数需要一个参数 name。

子类的 sayHello() 方法重写了父类的方法，并在原有的基础上增加了 age 属性的输出。子类的 sayBye() 方法是子类自己新增的方法。在创建实例对象时，可以调用父类和子类的方法。

总结

ES6 的 class 类是 JavaScript 中面向对象编程的新特性，使用起来比传统的原型链更加直观和方便。本文介绍了 class 类的基本语法和继承方式，并包含了详细的示例代码和学习指导。希望读者能够通过本文掌握 class 类的使用方法，提升自己的前端开发能力。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a0b980add4f0e0ff8f583e