牛客JS题（十四）类继承

news2024/12/27 13:00:02

注释很详细，直接上代码

涉及知识点：

类的基本使用
构造函数实现类
原型链的使用

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script type="text/javascript">
      /**
       * 如果只是用Class的方式完成这题着实有点水，因为拓展不出什么知识点
       * 咱先用规定方式完成一次再使用原型链的方式原模原样实现一遍
       */
      class Human {
        constructor(name) {//构造函数
          this.name = name;
          this.kingdom = "animal";
          this.color = ["yellow", "white", "brown", "black"];
        }
        // 补全代码
        getName() {
          return this.name;
        }
      }

      // 补全代码
      class Chinese extends Human {//继承Human
        constructor(name, age) {
          super(name);//调用父类构造函数
          this.age = age;
        }
        getAge() {
          return this.age;
        }
      }
        

      /**
      // 使用构造函数原型链的方式再实现一次-----------------------------------------------------------------------------------------
      // 父类 Human
      function Human(name) {
        this.name = name;
        this.kingdom = "animal";
        this.color = ["yellow", "white", "brown", "black"];
      }

      // 这里有个细节，为什么我不用箭头函数了，因为箭头函数没有this，this指向的是window，但我们需要this的指向
      // 在 Human 类的原型上添加方法
      Human.prototype.getName = function () {
        return this.name;
      };

      // 子类 Chinese 继承自 Human
      function Chinese(name, age) {
        Human.call(this, name); // 调用父类的构造函数，传入当前对象和参数
        this.age = age;
      }

      // 设置 Chinese 的原型，继承 Human
      // 这里需要注意两点：
      // 1.复制一遍Human.prototype，而不是直接引用，否则它俩指向的地址会一样
      // 2.将子类原型链的constructor指回自己
      Chinese.prototype = Object.create(Human.prototype);
      Chinese.prototype.constructor = Chinese;

      // 在 Chinese 类的原型上添加方法
      Chinese.prototype.getAge = function () {
        return this.age;
      };
      */
    </script>
  </body>
</html>