ES6 中类的继承详解及注意点-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们可以使用 class 关键字来定义类，同时也支持类的继承。本文将详细介绍 ES6 中类的继承，并列出一些需要注意的点。

1. 继承的基本语法

ES6 中使用 extends 关键字来实现类的继承，继承可以理解为子类继承父类的属性和方法。下面是一个简单的继承示例：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  bark() {
    console.log('汪汪！');
  }
}

const dog = new Dog('旺财');
dog.sayName(); // 输出：旺财
dog.bark(); // 输出：汪汪！

在上面的代码中，Dog 类继承了 Animal 类，通过 super 关键字调用了父类的构造函数，从而实现了子类对父类属性的继承。同时，Dog 类还新增了 bark 方法。

2. 继承的注意点

2.1 子类的 constructor 方法

在子类中，如果没有显式定义 constructor 方法，则会默认添加一个空的构造函数。如果子类需要在构造函数中进行一些初始化操作，就必须显式地调用 super 方法，以调用父类的构造函数，否则会报错。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  // 如果不定义 constructor 方法，则会默认添加一个空的构造函数
  // constructor() {}

  // 正确的写法
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

2.2 父类的静态方法和属性

子类可以通过 extends 关键字继承父类的静态方法和属性，但是不能继承父类的实例方法和属性。

// javascriptcn.com 代码示例
class Animal {
  static info = '这是一个动物类';

  static showInfo() {
    console.log(Animal.info);
  }

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

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  // 继承父类的静态方法和属性
  // 不能继承父类的实例方法和属性
}

Dog.showInfo(); // 输出：这是一个动物类

2.3 子类的原型对象

子类的原型对象是父类的实例，因此可以通过子类的实例调用父类的实例方法。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  bark() {
    console.log('汪汪！');
  }
}

const dog = new Dog('旺财');
dog.sayName(); // 输出：旺财

2.4 super 关键字

super 关键字既可以调用父类的构造函数，也可以调用父类的实例方法。需要注意的是，在子类的构造函数中必须先调用 super 方法，才能访问 this 对象，否则会报错。

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // 调用父类的构造函数
  }

  bark() {
    super.sayName(); // 调用父类的实例方法
    console.log('汪汪！');
  }
}

const dog = new Dog('旺财');
dog.bark(); // 输出：旺财 汪汪！

3. 总结

ES6 中的类继承可以让我们更加方便地实现代码的复用和扩展，但是在使用过程中需要注意一些细节，比如子类的构造函数、父类的静态方法和属性、子类的原型对象以及 super 关键字的使用。希望本文对大家理解 ES6 中的类继承有所帮助。

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