【js】原型继承和类继承写法

一段时间不用class就忘了咋使用了呜，记一下

原型继承写法：

function Father(name, age) {
        this.name = name;
        this.age = age;
      }
      Father.prototype = {
        // 重写的别忘了指回去，直接添加的不用
        constructor: Father,
        sing(song) {
          console.log(this.name + "已经" + this.age + "了，爱唱" + song);
        },
      };

      function Son(name, age, color) {
        // 用call方法将子级的this指向传给父级，改变了父级的this指向
        // 这样就继承了父级构造函数身上的属性方法
        Father.call(this, name, age);
        this.color = color;
      }

      // 利用原型继承
      Son.prototype = new Father();
      // 记得指回去
      Son.prototype.constructor = Son;

      const f = new Father("John", 34);
      f.sing("小星星");

      const s = new Son("Eve", 12, "pink");
      s.sing("孤勇者");

类继承写法：

// 利用super关键字继承，可以调用父类的构造函数，也可以调用父类的普通函数
      // super继承，在constructor中调用super，子类没有定义constructor方法，
      // super方法会被默认添加。子类的构造函数中，只有调用super之后，
      // 才可以使用this关键字，否则会报错。
      class Father {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }

        sing(song) {
          console.log(this.name + "已经" + this.age + "了，爱唱" + song);
        }
      }

      // 先用extends让子元素继承父类
      class Son extends Father {
        constructor(name, age, color) {
          // 使用super调用了父类中的构造函数
          super(name, age);
          this.color = color;
        }
        sing(song) {
          // super.sing() 调用父类的普通函数
          super.sing(song);
        }
      }

      const f = new Father("John", 34);
      f.sing("小星星");

      const s = new Son("Eve", 12, "pink");
      s.sing("孤勇者");

结果