注释很详细,直接上代码

涉及知识点:

  1. 类的基本使用
  2. 构造函数实现类
  3. 原型链的使用

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

我的答案

<!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>

博客更新不是很及时,需要看后面内容的可以看看我的gitee仓库

牛客JS题Gitee仓库

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部