ES6如何声明一个类？类如何继承？

天玄TX

已于 2023-10-29 08:43:51 修改

阅读量850

点赞数 1

分类专栏： ES6 文章标签： es6 前端 ecmascript

于 2023-10-01 11:09:25 首次发布

本文链接：https://blog.csdn.net/TianXuab/article/details/133459385

版权

ES6 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引言

在ES6（ECMAScript 2015）中，引入了类（class）的概念，使得JavaScript的面向对象编程更加直观和易于理解。类提供了一种结构化的方式来定义对象的属性和方法，并且支持继承。在本文中，我们将深入探讨如何在ES6中声明一个类以及如何实现类的继承。

类是什么

ES6类是一种用于创建对象的蓝图或模板。它是一种新的语法糖，用于更方便地声明和使用对象。

类的作用

ES6类是一种用于创建对象的模板或蓝图，它的作用包括：

封装数据和行为：类可以将数据和行为封装在一起，使得代码更加模块化和可维护。
继承：类可以通过继承来实现代码的重用和扩展。
多态：类的多态性使得代码更加灵活和可扩展。
简化代码：ES6类的语法糖使得代码更加简洁和易读。

使用ES6类可以更加方便地创建对象和管理对象的属性和方法，同时也可以提高代码的可读性和可维护性。

1. 声明一个类

在ES6中，声明一个类非常简单。我们使用class关键字后跟类的名称来声明一个类。类的名称通常采用帕斯卡命名法（PascalCase），即首字母大写。

class MyClass {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const myObject = new MyClass("Alice");
myObject.sayHello(); // 输出：Hello, Alice!

上述代码中，class关键字用于声明一个类MyClass。类中可以包含构造函数constructor和其他方法。构造函数用于初始化类的实例，可以接收参数并将其保存在实例的属性中。其他方法用于定义类的行为。

使用new关键字可以创建类的实例，并传入构造函数所需的参数。通过实例可以调用类中定义的方法。

在上述代码中，我们创建了一个名为myObject的MyClass的实例，并调用了sayHello方法，输出了Hello, Alice!。

2. 类的构造函数和实例方法

在ES6中，类的构造函数和实例方法是类的两个重要成员。

构造函数（constructor）：类中的构造函数用于初始化类的实例。它是一个特殊的方法，使用constructor关键字声明，没有返回值。构造函数可以接收参数，并将这些参数保存在实例的属性中。

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

在上述代码中，MyClass类的构造函数接收一个参数name，并将其保存在实例的name属性中。

实例方法：类中的实例方法用于定义类的行为。它们是在类的原型上定义的方法，可以通过类的实例来调用。实例方法不需要使用function关键字声明，直接写方法名和方法体即可。

class MyClass {
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

在上述代码中，MyClass类中定义了一个实例方法sayHello，它用于输出Hello, ${this.name}!，其中${this.name}是实例的name属性的值。

使用类的构造函数和实例方法，我们可以创建类的实例并调用实例方法来实现类的具体功能。例如：

const myObject = new MyClass("Alice");
myObject.sayHello(); // 输出：Hello, Alice!

在上述代码中，我们创建了一个名为myObject的MyClass的实例，并调用了sayHello方法，输出了Hello, Alice!。

3. 类的继承

在ES6中，类的继承可以通过extends关键字实现。子类可以继承父类的属性和方法，并可以在子类中添加新的属性和方法，或者重写父类的方法。

下面是一个使用类继承的例子：

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  speak() {
    console.log(`${this.name} barks.`);
  }
  
  fetch() {
    console.log(`${this.name} fetches the ball.`);
  }
}

const myDog = new Dog("Buddy", "Labrador Retriever");
myDog.speak(); // 输出：Buddy barks.
myDog.fetch(); // 输出：Buddy fetches the ball.