MDN学习区：深入理解JavaScript ES2015类继承机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00835/article/details/148464664

MDN学习区：深入理解JavaScript ES2015类继承机制

learning-area GitHub repo for the MDN Learning Area. 项目地址: https://gitcode.com/gh_mirrors/le/learning-area

前言

在现代JavaScript开发中，类继承是面向对象编程(OOP)的核心概念之一。ES2015(ES6)引入了基于类的语法，使得JavaScript的继承机制更加清晰和易于理解。本文将深入探讨ES2015中的类继承机制，通过实际示例帮助开发者掌握这一重要特性。

基础类定义

在ES2015中，我们使用class关键字来定义一个类。让我们先看一个基础的Person类示例：

class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

  greeting() {
    console.log(`Hi! I'm ${this.name.first}`);
  }

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  }
}

这个Person类具有以下特点：

使用constructor方法定义构造函数
接收五个参数：名、姓、年龄、性别和兴趣
包含两个方法：greeting()和farewell()
方法使用模板字符串语法，更加清晰易读

类的实例化

创建类的实例非常简单，使用new关键字即可：

let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
han.greeting(); // 输出: Hi! I'm Han

let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
leia.farewell(); // 输出: Leia has left the building. Bye for now

实例化过程会调用类的constructor方法，创建一个新的对象，并将方法绑定到这个对象上。

类继承的核心：extends和super

ES2015引入了extends关键字来实现类继承，让我们创建一个Teacher类继承自Person类：

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    
    this.subject = subject;
    this.grade = grade;
  }
}

关键点解析：

extends关键字表示Teacher继承自Person
子类的constructor中必须先调用super()，才能使用this
super()调用父类的构造函数
可以添加子类特有的属性（如subject和grade）

继承的实际应用

让我们实例化Teacher类并观察继承的效果：

let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
snape.greeting(); // 输出: Hi! I'm Severus.
snape.farewell(); // 输出: Severus has left the building. Bye for now.
console.log(snape.age); // 输出: 58
console.log(snape.subject); // 输出: Dark arts

可以看到：