ES6类class的使用与之前类的使用对比

面向对象

面向对象的编程思想有多重要呢，重要到只要是软件开发，就肯定会涉及到面向对象的思想。

然而 JS 在 ES6 之前没有一个很好的方法去定义一个类，记得刚开始做前端开发的时候，需要利用 function 定义一个类，由于之前的C++思想太过顽固，我总抱怨 JS 定义类的方式太过繁琐，继承时看起来结构不够清晰等等。终于在 ES6 中，有了一个新的关键词 — class，

ES6之前的面向对象表示

1. 类的定义
   (1) 构造器和类在一起定义
   (2) 方法定义在类的外面，使用prototype定义类的方法
   在之前，利用function来定义一个类：

   function User(name, pass){
     this.name = name;
     this.pass = pass;
   }
   
   User.prototype.showName = function(){
     console.log(this.name);
   }
   
   User.prototype.showPass = function(){
     console.log(this.pass);
   }
   
   var user = new User('Tom', '1234');
   user.showName();
   user.showPass();
   

   运行结果为：
   

2. 类的继承
   使用call关键字来继承父类的变量:

   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(){
     console.log(this.level);
   }
   

   运行结果为：
   
   

ES6中面向对象表示 — class

有了class之后就真的方便多了。

1. 类的定义
   (1) 构造器和类分开了
   (2) class里面直接加方法

class User{
 //构造器
 constructor(name, pass){
   this.name = name;
   this.pass = pass;
 }
 //函数也直接在类中声明
 showName(){
   console.log(this.name);
 }
 showPass(){
   console.log(this.pass);
 }
}

该段代码等价于上述类的定义代码段。
2. 类的继承
(1) 使用super关键词继承父类的属性
(2) 父类的方法直接就继承了

//类的继承
class VipUser extends User {
  //父类中的属性还是要有滴
  constructor(name, pass, level){
    // super是超类，也就是父类，利用这个关键词继承父类的属性
    super(name, pass);
    this.level = level;
  }

  //函数也直接在类里面声明即可
  showLevel(){
    console.log(this.level)
  }
}