59 - 对象 - 类与继承 - ES6 类的定义与使用

前端 - Javascript 《对象 - 类与继承 - ES6 类的定义与使用》

在 JavaScript 的世界里，对象、类与继承是非常重要的概念。ES6 引入了类的语法糖，让我们创建和使用对象变得更加直观和简洁。下面就让我们一起来探索 ES6 类的定义与使用吧！

类的定义

在 ES6 之前，我们通常使用构造函数和原型链来模拟类。而 ES6 引入了 class 关键字，让类的定义变得更加清晰。

// 定义一个 Person 类
class Person {
    // 构造函数，用于初始化对象的属性
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // 定义一个方法
    introduce() {
        return `我叫 ${this.name}，今年 ${this.age} 岁。`;
    }
}
// 创建一个 Person 类的实例
const person1 = new Person('张三', 20);
console.log(person1.introduce());

在上面的代码中，我们定义了一个 Person 类，它有两个属性 name 和 age，以及一个方法 introduce。通过 new 关键字，我们创建了一个 Person 类的实例 person1，并调用了 introduce 方法。

类的继承

类的继承允许我们创建一个新的类，继承另一个类的属性和方法。在 ES6 中，我们使用 extends 关键字来实现继承。

// 定义一个 Student 类，继承自 Person 类
class Student extends Person {
    constructor(name, age, grade) {
        // 调用父类的构造函数
        super(name, age);
        this.grade = grade;
    }
    // 重写父类的方法
    introduce() {
        return `我叫 ${this.name}，今年 ${this.age} 岁，我在 ${this.grade} 年级。`;
    }
}
// 创建一个 Student 类的实例
const student1 = new Student('李四', 15, '初三');
console.log(student1.introduce());

在上面的代码中，我们定义了一个 Student 类，它继承自 Person 类。在 Student 类的构造函数中，我们使用 super 关键字调用了父类的构造函数。同时，我们重写了 introduce 方法，让它输出更详细的信息。

总结

下面是一个简单的表格，总结了 ES6 类的定义与使用：
| 概念 | 描述 | 示例 |
| —— | —— | —— |
| 类的定义 | 使用 class 关键字定义一个类，构造函数使用 constructor 关键字 | class Person { constructor(name, age) { this.name = name; this.age = age; } } |
| 类的方法 | 直接在类中定义方法 | class Person { introduce() { return 'Hello'; } } |
| 类的继承 | 使用 extends 关键字实现类的继承 | class Student extends Person { } |
| 调用父类构造函数 | 在子类构造函数中使用 super 关键字调用父类的构造函数 | class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } } |
| 方法重写 | 在子类中重新定义父类的方法 | class Student extends Person { introduce() { return 'New message'; } } |

ES6 类的引入让 JavaScript 的面向对象编程更加简洁和直观。通过类的定义和继承，我们可以更好地组织和复用代码，提高开发效率。希望通过本文的介绍，你对 ES6 类的定义与使用有了更深入的理解。