ES6 新增了更接近传统语言写法的 Class 这个概念，基本上可以当作是一个语法糖，绝大部分的功能在 ES5 都可以做到，但 Class 可以让构造函式的写法更加清新！

什麽是语法糖？
就是新增的语法对原功能没有什麽影响，主要是给程序开发者更方便的使用。

class 初体验

首先，我们先用之前的构造函式

function Person (name, gender) {
  this.name = name,
  this.gender = gender
}
Person.prototype.sayName = function(){     // 构造函式方法传给原型链
  console.log( "大家好！我是" + this.name );
}

const person = new Person("毛毛", "男");
person.sayName();  // "大家好！我是毛毛"

接着来使用 class 构造函式，来看看差异，可以发现继承方法可以写在构造函式内，它会自动帮我们传给原型链上，而物件资料写在 constructor 内

class Person {
  // 构造函式方法，一定要使用 constructor 不能改名
  constructor (name, gender) {
    this.name = name;
    this.gender = gender;
  }
  
  sayName () {  // 添加方法必须使用这个语法
    console.log( "大家好！我是" + this.name ); 
  }
}

const person = new Person("毛毛", "男");
person.sayName();  // "大家好！我是毛毛"
console.log(person);

静态属性

我们都知道构造函式也是物件，ES6 以前构造函式要添加静态属性，就是使用物件的方法来添加，因为没有使用到原型链，所以这个属性是 Person 内的属性，也就是静态属性。

function Person(){}
Person.type = "人类";

const mao = new Person();
console.log(mao.type);     // undefined
console.log(Person.type);  // "人类"

static 静态方法

而 class 有新增静态方法 static，来实现静态属性。

class Person(){
  static type = "人类";
}

const mao = new Person();
console.log(mao.type);     // undefined
console.log(Person.type);  // "人类"

构造函式继承

ES6 以前要写构造函式继承构造函式时

/*  父级构造函式，人  */
function Person (name, gender) {
  this.name = name,
  this.gender = gender
}
Person.prototype.sayName = function(){
  console.log( "大家好！我是" + this.name );
}

/*  子级构造函式，成年人  */
function AdultPerson (name, gender, age, married) {
  Person.call(this, name, gender);  // 透过 call 方法来继承父级构造函式资料
  this.age = age;
  this.married = married;
}
/*  设定子级构造函式的原型  */
AdultPerson.prototype = new Person;
/*  校正子级构造函式的 constructor  */
AdultPerson.prototype.constructor = AdultPerson;

const mao = new AdultPerson("毛毛", "男", 27, "未婚");
mao.sayName(); // "大家好！我是毛毛"
console.log(mao);

可以看到使用子级构造函式，可以继承父级构造函式的方法 sayName。

extends 继承方法

而 class 有新增继承方法 extends 与 super，来实现继承父级构造函式。

class Person {
  // 构造函式方法，一定要使用 constructor 不能改名
  constructor (name, gender) {
    this.name = name;
    this.gender = gender;
  }
  
  sayName () {  // 添加方法必须使用这个语法
    console.log( "大家好！我是" + this.name ); 
  }
}

class AdultPerson extends Person { // 使用 extends 继承父级构造函式
  constructor (name, gender, age, married) {
    // 使用 super 调用父级构造函式的属性方法
    super(name, gender);   // 与 Person.call(this, name, gender) 效果一样
    this.age = age;
    this.married = married;
  }
  /*  可以自己新增方法  */
}

const mao = new AdultPerson("毛毛", "男", 27, "未婚");
mao.sayName(); // "大家好！我是毛毛"
console.log(mao);

使用起来，更简洁有利～也更加直觉可以判断是两个构造函式与之间的关系！

getter 与 setter

class 的 get 与 set 方法，
在对某个属性读取时，会调用 get 对应的函式，
在对某个属性设置时，会调用 set 对应的函式。

class Person {
  // 构造函式方法，一定要使用 constructor 不能改名
  constructor (name) {
    this.name = name;
  }
  get name () {
    console.log("名字被读取");
  }
  set name (newVal) {
    console.log("名字被修改为" + newVal);
  }
}

const mao = new Person("毛毛");  // 这时会自动调 set name 方法，"名字被修改为毛毛"
console.log(mao.name);    // 这时会自动调 get name 方法，"名字被读取"
mao.name = "鲑鱼";  // 这时会自动调 set name 方法，"名字被修改为鲑鱼"

总结

Class 这个语法糖，让我们写构造函式会更加方便直观，用过都说回不去了！