ES6面向对象和继承：基础

ES6面向对象和继承——基础：
1、传统写法

<script>
  function User(name, pass) {
      // 弊端：User既是一个构造函数，也是一个类
      this.name = name;
      this.pass = pass;
  }

  // 原型加载
  User.prototype.showName = function() {
      alert(this.name);
  }

  User.prototype.showPass = function() {
      alert(this.pass);
  }

  // 继承
  function VipUser(name, pass, level) {
      User.call(this, name, pass);

      this.level = level;
  }

  VipUser.prototype = new User();
  VipUser.prototype.constructor = VipUser;

  VipUser.prototype.showLevel = function() {
      alert(this.level);
  };

  var user1 = new User('hr226', '123456');
  var vipUser1 = new VipUser('hr226', '123456', 5)

  user1.showName();
  user1.showPass();

  vipUser1.showName();
  vipUser1.showPass();
  vipUser1.showLevel();
</script>

2、ES6新写法：
1、关键字class、构造器和类分开了
2、class里边可以直接加方法

<script>
  class User {
      // User是一个构造函数或构造器
      // constructor构造器
      constructor(name, pass) {
          this.name = name;
          this.pass = pass;
      }

      // 注意：请不要加上function
      // 如：这样的格式：showName:function(){}，这是错误的
      showName() {
          alert(this.name);
      }

      // 注意：请不要在两个函数之间（即在showName(){}, ;的函数结尾处）加上逗号或分号，
      showPass() {
          alert(this.pass);
      }
  }

  // 继承
  class VipUser extends User {
      constructor(name, pass, level) {
          // super：超类、父类、基类
          super(name, pass);

          this.level = level;
      }

      showLevel() {
          alert(this.level);
      }
  }

  var vipUser1 = new VipUser('hr226', '123456', 5)

  vipUser1.showName();
  vipUser1.showPass();
  vipUser1.showLevel();
</script>