ES6中类的继承以及抽象类的实现

1. 使用原生的方式实现类的继承

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类的继承：原生方式</title>
  </head>
  <body>
    <script>
      // 父类
      function Phone(brand, price) {
        // 属性
        this.brand = brand;
        this.price = price;
      }
      // 公共方法/原型方法
      Phone.prototype.show = function () {
        return `手机品牌： ${this.brand}\n价格： ${this.price}\n`;
      };
      console.dir(Phone);
      // 子类
      function Tel(brand, price, color) {
        // 借助call()函数，实现继承，可传入父类中的参数
        Phone.call(this, brand, price);
        this.color = color;
      }
      console.dir(Tel);
      // 更新子类的原型对象
      Tel.prototype = Object.create(Phone.prototype);
      // 手工补上constructor
      Tel.prototype.constructor = Tel;
      // 子类重写父类中的方法
      Tel.prototype.show = function () {
        return Phone.prototype.show.call(this).concat(`${this.color}`);
      };
      // 实例化子类
      const apple = new Tel("苹果", 5500, "银色");
      console.log(apple.show());
      const vivo = new Tel("Vivo", 3800, "红色");
      console.log(vivo.show());
      // ƒ Phone(brand, price)
      // ƒ Tel(brand, price, color)
      // 手机品牌： 苹果
      // 价格： 5500
      // 银色
      // demo1.html:42 手机品牌： Vivo
      // 价格： 3800
      // 红色
    </script>
  </body>
</html>

2. 使用ES6实现类的继承

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用ES6实现类的继承</title>
  </head>
  <body>
    <script>
      // 父类
      class Dad {
        // 构造方法
        constructor(name, email) {
          this.name = name;
          this.email = email;
        }
        // 原型方法
        show() {
          return `姓名：${this.name}\n邮箱：${this.email}\n`;
        }
      }
      // 子类
      class Son extends Dad {
        constructor(name, email, age) {
          // super() 调用父类中的构造方法
          super(name, email);
          this.age = age;
        }
        // 重写父类中的原型方法
        show() {
          //   return `${super.show()}年龄：${this.age}`;
          // super 调用父类中的原型方法
          return super.show().concat(`年龄：${this.age}`);
        }
      }
      // 实例化子类
      const son = new Son("jack", "jack@qq.com", 20);
      console.log(son.show());
    </script>
  </body>
</html>

3. ES6抽象类的实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ES6实现抽象类</title>
  </head>
  <body>
    <script>
      // 抽象类：不能实例化，可以继承
      // 父类
      class A {
        constructor() {
          // new.target属性：一般用于构造函数中
          // 1. 当在class内部调用时，会返回当前class名
          // 2. 当有子类继承时，会返回子类
          // 3. 此属性就是用于检查new的时候作用于哪个构造函数
          if (new.target === A) {
            throw new Error("本类不允许被实例化");
          }
        }
      }
      // 子类
      class B extends A {
        constructor(length, width) {
          super();
          this.length = length;
          this.width = width;
        }
        show() {
          return `长：${this.length} * 宽：${this.width} = 面积：${
            this.length * this.width
          }`;
        }
      }
      // 实例化
      // 1. 实例化父类 报错
      //   const demo1 = new A();
      // Uncaught Error: 本类不允许被实例化
      // 2. 实例化子类
      const demo2 = new B(2, 5);
      console.log(demo2.show());
      //   长：2 * 宽：5 = 面积：10
    </script>
  </body>
</html>

1. 使用原生的方式实现类的继承

2. 使用ES6实现类的继承

3. ES6抽象类的实现

相关文章