正文

JavaScript中实现类的继承：实例化子类，继承父类属性与方法

/0 浏览量
0331

在JavaScript中，类（class）是ES6（ECMAScript 2015）引入的一个新特性，它使得对象的创建和继承更加简洁和直观。类继承是面向对象编程中的一个核心概念，它允许我们创建一个新的类（子类），该类继承自另一个已有的类（父类），从而可以继承父类的属性和方法。

下面，我们将详细探讨如何在JavaScript中实现类的继承，并展示如何实例化子类以继承父类的属性和方法。

类的基本结构

首先，让我们来看看一个简单的父类和一个子类的例子：

// 定义父类
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log('Some generic sound');
  }
}

// 定义子类
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

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

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

在上面的代码中，Animal 是一个父类，它有一个构造函数和一个方法 speak。Dog 是一个继承自 Animal 的子类，它除了继承 Animal 的构造函数和方法之外，还添加了一个自己的属性 breed 和一个自己的方法 bark。

继承的原理

在JavaScript中，类的继承是通过 extends 关键字实现的。当子类使用 extends 关键字时，它将自动继承父类的所有可枚举属性和方法。

当子类创建一个实例时，它首先会执行父类的构造函数（通过 super 关键字）。super 关键字在子类构造函数中用于调用父类（或父类的父类）的构造函数。

实例化子类

现在，我们来实例化子类 Dog 并展示它如何继承父类 Animal 的属性和方法：

const myDog = new Dog('Buddy', 'Labrador');

// 使用继承的属性
console.log(myDog.name); // 输出: Buddy
console.log(myDog.breed); // 输出: Labrador

// 使用继承的方法
myDog.speak(); // 输出: Some generic sound
myDog.bark(); // 输出: Bark!

在上面的例子中，我们创建了一个 Dog 类的实例 myDog。这个实例继承自 Animal 类，因此我们可以访问 Animal 类的所有属性和方法，以及 Dog 类自己的属性和方法。

多层继承

JavaScript 支持多层继承。如果一个子类又有一个子类，这个新的子类同样可以继承父类的属性和方法：

// 定义更深的子类
class GoldenRetriever extends Dog {
  constructor(name) {
    super(name, 'Golden Retriever');
  }

  fetch() {
    console.log('Fetching...');
  }
}

const myGoldenRetriever = new GoldenRetriever('Max');
console.log(myGoldenRetriever.name); // 输出: Max
console.log(myGoldenRetriever.breed); // 输出: Golden Retriever
myGoldenRetriever.speak(); // 输出: Some generic sound
myGoldenRetriever.bark(); // 输出: Bark!
myGoldenRetriever.fetch(); // 输出: Fetching...

在上述代码中，GoldenRetriever 类继承自 Dog 类，从而继承了 Dog 类和 Animal 类的所有属性和方法，同时 GoldenRetriever 类还添加了自己的方法 fetch。

总结

通过使用 class 和 extends 关键字，JavaScript 允许我们以非常简洁和直观的方式实现类的继承。子类可以继承父类的属性和方法，并添加自己的特性。通过实例化子类，我们可以轻松地访问和利用这些继承的特性。

掌握类的继承是JavaScript面向对象编程的重要部分，它为构建复杂且可重用的代码提供了强大的工具。

-- 展开阅读全文 --