ES6构造函数继承

原创

堕落飞鸟

发布于 2023-05-23 09:37:57

3500

发布于 2023-05-23 09:37:57

文章被收录于专栏：飞鸟的专栏

构造函数继承的概念

构造函数继承是一种通过创建子类来继承父类的属性和方法的方式。通过构造函数继承，子类可以获得父类的实例属性，并且可以调用父类的构造函数来初始化这些属性。这种继承方式允许子类扩展父类的功能，并添加自己的属性和方法。

构造函数继承的关键在于使用super()函数在子类的构造函数中调用父类的构造函数。这样可以确保子类继承了父类的属性，并完成了属性的初始化过程。

语法

ES6中构造函数继承的语法如下：

class ChildClassName extends ParentClassName {
  constructor(/* 子类构造函数参数 */) {
    super(/* 父类构造函数参数 */);
    // 子类构造函数代码
  }
}

在子类的定义中，使用extends关键字指定父类的名称。然后，在子类的构造函数中使用super()函数来调用父类的构造函数。这样可以确保子类继承了父类的属性，并完成了属性的初始化。

示例

让我们通过一些示例来理解ES6中构造函数继承的使用。

示例1：单继承

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

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const dog = new Dog('Bobby');
dog.eat(); // 输出：Bobby is eating.
dog.bark(); // 输出：Bobby is barking.

在上面的示例中，我们定义了一个Animal类，它有一个属性name和一个方法eat()。然后，我们定义了一个Dog类，它通过extends关键字继承了Animal类，并添加了一个新的方法bark()。

通过构造函数继承，Dog类获得了Animal类的属性和方法。我们创建了一个Dog类的实例，并调用了继承的eat()方法和自身的bark()方法。

示例2：多继承

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

  method1() {
    console.log('This is Parent 1 method.');
  }
}

class Parent2 {
  constructor() {
    this.age = 30;
  }

  method2() {
    console.log('This is Parent 2 method.');
  }
}

class Child extends Parent1, Parent2 {
  constructor() {
    super();
    super.method1();
    super.method2();
  }
}

const child = new Child();
console.log(child.name); // 输出：Parent 1
console.log(child.age); // 输出：30

在这个示例中，我们定义了两个父类Parent1和Parent2，它们分别有自己的属性和方法。然后，我们定义了一个子类Child，它同时继承了Parent1和Parent2。

在子类的构造函数中，我们使用super()函数调用了父类Parent1的构造函数，并分别调用了父类的method1()和method2()方法。

通过构造函数继承，子类Child获得了两个父类的属性和方法。我们创建了一个Child类的实例，并访问了继承的属性name和age。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

登录后参与评论

0 条评论

热度