class 类的继承

彩色之外

已于 2023-04-19 16:41:46 修改

阅读量354

点赞数 1

分类专栏： # ES6 文章标签： javascript typescript es6 calss 继承

于 2021-12-16 16:00:56 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/121976812

版权

ES6 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. ES6中的类可以实现继承，通过extends关键字来实现子类继承父类；
2. 在子类构造函数中调用super()方法可以访问到父类的属性和方法，并且需要在使用this之前调用super()。这是因为在ES6的类继承中，子类在构造函数中必须先初始化父类的属性和方法，然后才能使用this关键字引用它自己的属性和方法。
3. constructor方法用于初始化类的实例属性，在子类中也可以定义constructor方法来覆盖父类的constructor方法，但是需要在子类的构造函数中先调用super()方法以初始化父类的属性和方法。

希望这些补充能够帮助你更好地理解ES6中的类和继承机制。

定义父类 Person

    // 定义父类

      class Person {
        constructor(name, age) {
          //  构造函数，作用是初始化对象
          this.name = name;
          this.age = age;
        }
        say() {
          console.log(`我是${this.name},我今年${this.age}岁了!`);
        }
      }
      const per = new Person("小帅", 26);
      per.say(); //输出：我是小帅,我今年26岁了!

定义 Person1 子类继承 Person 父类

    // 定义 Person1 子类 继承 Person 父类 并添加自己的属性与方法，同时修改父类属性

      class Person1 extends Person {
        constructor(name, age, sex) {
          super(name, age); // 调用父类的 constructor 方法
          this.sex = sex; // 添加新的属性
        }

        say() {
          // 重写从父类继承而来的方法
          console.log(`我是重写从父类继承而来的方法,我叫${this.name}，今年${this.age}岁了！`);
        }

        getSex() {
          // 添加新的方法
          console.log(`我是${this.sex}生！`);
        }
      }
      // 创建 Person1 实例对象
      const per1 = new Person1("小美", 20, "女");

      // 修改继承的属性
      per1.name = "小黑子";
      per1.age = 18;

      // 调用继承自父类的方法
      per1.say(); // 输出：我是重写从父类继承而来的方法,我叫小黑子，今年18岁了！

      // 调用子类新增的方法
      per1.getSex();// 输出：我是女生！

多个子类需要继承同一个父类

     // 多个子类需要继承同一个父类

      class Person2 extends Person {
        constructor(name, age, game) {
          super(name, age); // 调用父类的 constructor 方法
          this.game = game; // 添加新的属性
        }
        // 继承父类的方法
        say() {
          console.log(`我是${this.name},我今年${this.age}岁了!`);
        }
        // 添加新的方法
        getGame() {
          console.log(`我喜欢玩${this.game}游戏！`);
        }
      }
        // 创建 Person2 实例对象
        const per2 = new Person2("小明", 21, "王者荣耀");
        per2.say(); // 输出：我是小明,我今年21岁了!
        per2.getGame(); // 输出：我喜欢玩王者荣耀游戏！

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>教会你es6 class用法</title>
  </head>
  <body>
    <script>
      // 定义父类

      class Person {
        constructor(name, age) {
          //  构造函数，作用是初始化对象
          this.name = name;
          this.age = age;
        }
        say() {
          console.log(`我是${this.name},我今年${this.age}岁了!`);
        }
      }
      const per = new Person("小帅", 26);
      per.say(); //输出：我是小帅,我今年26岁了!

      // 定义 Person1 子类 继承 Person 父类 并添加自己的属性与方法，同时修改父类属性

      class Person1 extends Person {
        constructor(name, age, sex) {
          super(name, age); // 调用父类的 constructor 方法
          this.sex = sex; // 添加新的属性
        }

        say() {
          // 重写从父类继承而来的方法
          console.log(`我是重写从父类继承而来的方法,我叫${this.name}，今年${this.age}岁了！`);
        }

        getSex() {
          // 添加新的方法
          console.log(`我是${this.sex}生！`);
        }
      }

      // 创建 Person1 实例对象
      const per1 = new Person1("小美", 20, "女");

      // 修改继承的属性
      per1.name = "小黑子";
      per1.age = 18;

      // 调用继承自父类的方法
      per1.say(); // 输出：我是重写从父类继承而来的方法,我叫小黑子，今年18岁了！

      // 调用子类新增的方法
      per1.getSex(); // 输出：我是女生！

      // 多个子类需要继承同一个父类

      class Person2 extends Person {
        constructor(name, age, game) {
          super(name, age); // 调用父类的 constructor 方法
          this.game = game; // 添加新的属性
        }
        // 继承父类的方法
        say() {
          console.log(`我是${this.name},我今年${this.age}岁了!`);
        }
        // 添加新的方法
        getGame() {
          console.log(`我喜欢玩${this.game}游戏！`);
        }
      }
      // 创建 Person2 实例对象
      const per2 = new Person2("小明", 21, "王者荣耀");
      per2.say(); // 输出：我是小明,我今年21岁了!
      per2.getGame(); // 输出：我喜欢玩王者荣耀游戏！
    </script>
  </body>
</html>

一些问题：

q: 既然继承了为什么子类还要new父类呢？比如 const per1 = new Person1("小美", 20, "女");，不是要继承父类的属性和方法吗？为什么子类还要new父类的name和age？
a: 当子类继承父类时，它会自动获得父类的属性和方法。但是，在创建子类的实例时，我们需要调用父类的构造函数来初始化父类的属性。如果没有初始化父类的属性，它们会保持未定义状态，这可能会导致程序出错。

因此，当我们在Person1子类中定义了一个新的构造函数时，我们需要手动调用super方法，并传递name和age参数给父类的构造函数，以便在创建Person1实例时，父类的属性能够被正确初始化。这样我们就可以在子类中使用继承来的属性和方法，而不必再次定义它们。
q: 这种的意义在哪，反正都要写两遍，我直接再写一个不就行了，他的使用场景在哪？
a: 使用类继承的意义在于避免重复编写相似的代码，从而提高代码的可读性和可维护性。当我们需要创建一些具有共同特征的对象时，可以将它们定义为一个父类，并让子类继承这个父类。这样，子类就可以获得父类中定义的所有属性和方法，而且如果需要对这些属性和方法进行修改或扩展，只需要在子类中进行即可。

此外，由于子类继承了父类中的属性和方法，因此可以更轻松地实现代码复用。如果没有继承机制，我们可能需要在多个地方复制和粘贴相同的代码，这会增加程序的复杂度和难度。比如少写了很多的this.name = name; this.age=age;之类；

总之，使用类继承可以帮助我们更好地组织和管理代码，提高代码的效率和可读性。
我想知道这些个代码继承了什么
本次演示了类继承的用法。它定义了一个名为 "Person" 的父类，其中包含一个构造函数和一个方法 "say"，以及两个子类 "Person1" 和 "Person2"，它们都继承自 "Person"。"Person1" 类添加了一个新属性和一个新方法，重写了从 "Person" 继承的 "say" 方法，并修改了继承的属性。"Person2" 类添加了不同的新属性和新方法，但没有重写 "say" 方法。最后，创建了所有三个类的实例，并调用了它们的方法。