JavaScript类的继承全面示例讲解

2023年5月28日上午7:12 • JavaScript

JavaScript中的类继承是面向对象编程中的重要概念，它可以使得类与类之间实现代码的共享、重用以及扩展。在这里我们将详细讲解JavaScript类的继承全面示例讲解。

一、继承的概念

继承是指从已有的类中派生出新的类，新的类能够继承已有类的属性和方法，并且可以在此基础上添加自己的属性和方法。继承的概念可以使代码得到更好的复用性和灵活性。

二、JavaScript类定义

在JavaScript中，我们通常使用类定义来实现面向对象编程。一个类由多个密封的函数组成，其中包括类构造函数、类方法和类属性。类构造函数可以用来初始化对象，类方法可以用来操作对象，类属性可以用来存储对象的数据。

下面是一个简单的JavaScript类定义：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }

  static talk() {
    console.log('This is a static method');
  }
}

在上述代码中，我们定义了一个名为Person的类。该类有两个属性name和age，一个方法sayHello()和一个静态方法talk()。

三、JavaScript类继承

JavaScript中的类继承是通过extends关键字来实现的。在子类中使用super关键字可以调用父类的构造函数和方法。

下面是一个简单的JavaScript类继承的示例：

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

  speak() {
    console.log(this.name + ' makes a noise');
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

let dog = new Dog('Rufus', 'Labrador');
dog.speak();
dog.bark();

在上述代码中，我们定义了两个类Animal和Dog。其中Animal类有一个构造函数和一个方法speak()，Dog类继承了Animal类的属性和方法，并新增了一个构造函数和一个方法bark()。在Dog类的构造函数中使用了super关键字来调用父类的构造函数。

四、JavaScript多重继承

JavaScript中是不支持多重继承的，但可以通过组合方式来实现多重继承的相似功能。

下面是一个JavaScript多重继承的示例：

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

  speak() {
    console.log(this.name + ' makes a noise');
  }
}

class Bird {
  fly() {
    console.log('Birds can fly');
  }
}

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

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

mixin(Parrot.prototype, Bird.prototype);

let parrot = new Parrot('Polly');
parrot.speak();
parrot.fly();

在上述代码中，我们定义了三个类Animal、Bird和Parrot。其中Animal和Bird类分别有各自的属性和方法，而Parrot类在继承Animal类的时候通过mixin()函数将Bird类的属性和方法也继承了过来。

五、JavaScript类继承的其他细节

在JavaScript中，类继承还有一些其他细节需要注意：

子类必须在调用super()之后才能访问this。
子类中的静态方法不能被继承，但可以被子类自己定义的静态方法覆盖。
子类的构造函数必须调用super()，否则会造成引用错误。
父类的构造函数中的this指向实例对象，而子类中的this也指向实例对象。

六、示例说明

示例一

下面是一个简单的JavaScript类继承的示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }

  sayHello() {
    super.sayHello();
    console.log('I am majoring in ' + this.major);
  }
}

let student = new Student('Alice', 20, 'Mathematics');
student.sayHello();

在上述代码中，我们定义了一个Person类和一个Student类。Student类继承了Person类，在新的构造函数中新增了一个属性major。在Student类的sayHello()方法中，使用super关键字来调用父类的sayHello()方法，并在此基础上添加了自己的语句。

运行上述代码可以得到如下输出：

Hello, my name is Alice
I am majoring in Mathematics

示例二

下面是一个使用组合方式实现JavaScript多重继承的示例：

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

  speak() {
    console.log(this.name + ' makes a noise');
  }
}

class Bird {
  fly() {
    console.log('Birds can fly');
  }
}

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

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

mixin(Parrot.prototype, Bird.prototype);

let parrot = new Parrot('Polly');
parrot.speak();
parrot.fly();

运行上述代码可以得到如下输出：