ES6中的类怎么使用？

类是一个模板，它描述一类对象的行为和状态。在ES5中简化为通过构造函数来描述。ES6恢复了过来。

1 class

要使用class关键字去定义一个类，用法如下：

class Person{
}
console.log(new Person());//Person {}
console.log(typeof Person);//function

可见Person有构造函数的作用，类似于ES5中的构造函数，但又不仅仅是一个构造函数，因为毕竟连写法都不一样了呢。

2 构造函数

class Person{
      constructor(name='zhangsan'){
          this.name = name;
          this.add = function(a,b){
                return a+b;
          }
      }
}
console.log(new Person());
//Person {
  name: "zhangsan"，
  add:function(){}
}

可见每一个类中的constructor才是对应的ES5中的构造函数本身。其内挂载到this上的属性和方法(函数)都是将来的实例属性和方法。但类的设计者认为方法（函数）应该是所有实例共享即可，没必要每个实例上都存一份，于是有了下面的写法。

3 原型上的函数

class Person{
      constructor(name='zhangsan'){
          this.name = name;
      }
      add(a,b){
          return a + b;
      }
}
console.log(new Person());
//Person {name: "zhangsan"}
console.log(Person.prototype.add);
//ƒ add(a,b){return a + b;}

如上写法，add函数即挂载到了原型上，供所有实例共享。注意上边的写法，定义原型上的函数时与constructor平级，且不需要使用,逗号隔开。

4 另外一种往实例上挂载非函数属性的写法

• 在构造函数外写key = value

class Person{
      constructor(name='zhangsan'){
          this.name = name;
      }
      age=18;
}
console.log(new Person());
//Person {age: 18, name: "zhangsan"}

这种写法不能接受构造函数的初始化参数，只能通过实例.操作符进行访问和设置。

5访问器get和set

class Day{
      constructor(day=1){
          this.day= day;
      }
      get proxyDay(){
          if(day < 10){
                return '0'+this.day;
          }
          return this.day;
      }
      set proxyDay(value){
          if(value < 31 && value >0){
              this.day = value;
          }
      }
}
var day = new Day();
console.log(day.proxyDay);//1
day.proxyDay = -1;
console.log(day.proxyDay);//1
day.proxyDay = 15;
console.log(day.proxyDay);//15

6 extends关键字 继承

class Day{
      constructor(day=1){
          this.day= day;
      }
}
class Holiday extends Day{
      /*
       constructor(){
          super();
      }
     */
}
var holiday = new Holiday();
console.log(holiday);//{day:1}

以上代码中Holiday类继承了Day类，Day即为Holiday的父类，Holiday即为Day的子类，Holiday中的构造器已经注释掉了，可依然能得到一个实例{day:1}，可见Holiday默认执行了父类的构造器
子类构造器中可以新增挂载实例属性，且可覆盖继承自父类属性。

class Day{
      constructor(day=1){
          this.day= day;
      }
}
class Holiday extends Day{
       constructor(){
          super();
          this.day = 5;
          this.hour = 12;
      }
}
var holiday = new Holiday();
console.log(holiday);//{day:5,hour:12}

7 static关键字 静态函数

class Day{
      constructor(day=1){
          this.day= day;
      }
      static add(a,b){
            return a + b;
      }
}
var day = new Day();
console.log(day.add);//undefined
console.log(Day.add);//ƒ add(a,b){return a + b;}

静态函数只可以通过类Day调用，实例不可调用。
需要注意的是，static只针对函数其作用。

8 静态属性（只能通过类调用的数据类型属性）

class Day{
      constructor(day=1){
          this.day= day;
      }
      static add(a,b){
            return a + b;
      }
}
Day.dayType = '日子';
var day = new Day();
console.log(day.dayType);//undefined
console.log(Day.dayType);//日子

ES6总篇--目录