ES6-----class

传统方法中，我们想要实例一个对象是通过构造函数来实现：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.showName = function () {
    console.log(this.name);
}
var p = new Person('lily', 18);
Person('h', 0);
console.log(name, age);//h 0 

但是这种写法存在一些问题，首先如果不去看函数体，无法知道这是一个构造函数还是一个普通函数；其次构造函数可以当成普通函数执行，执行后会产生全局变量。还有这种写法不容易理解。ES6中提出了class（类）的概念，通过class关键字可以定义类，同样可以实现实例对象，但是比传统方式更易理解。
首先来看一下如何定义一个类：

class Animal {
    constructor(name) {
        this.name = name;
    }
}
console.log(typeof Animal);//function
console.log(Animal == Animal.prototype.constructor);//true

通过上面代码执行可以看出，Animal是一个函数，这个函数里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。使用的时候也是通过new来生成一个实例对象

var dog = new Animal('dog');

1、constructor
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

原有的构造函数可以当成普通函数执行，但是在ES6里类必须使用new调用，否则会报错。

//直接当成普通函数执行会报错
Animal('cat');
//TypeError: Class constructor Animal cannot be invoked without 'new'

2、原型
在传统方式中，如果我们想要在原型上添加方法需要用xxx.prototype.xxx的方式，在ES6中我们同样可以在原型上添加方法。

class Animal {
    constructor(name) {
        this.name = name;
    }
    showName() {   
        console.log(this.name);
    }
}
var dog = new Animal('dog');
dog.showName();//dog
console.log(dog.showName == Animal.prototype.showName);//true

实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）

3、静态方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Animal {
    constructor(name) {
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
    static sayHello(){
        console.log('hello',this.name);//这里的this指向类，而不是实例
    }
}
Animal.sayHello();//hello Animal

4、Class 的 Generator 方法
如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。

class Foo {
  constructor(...args) {
    this.args = args;
  }
  * [Symbol.iterator]() {
    for (let arg of this.args) {
      yield arg;
    }
  }
}

for (let x of new Foo('hello', 'world')) {
  console.log(x);
}
// hello
// world

类的内部所有定义的方法，都是不可枚举的。在上面代码中，Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器，for…of循环会自动调用这个遍历器。

5、不存在声明提升、重复定义
我们知道函数声明会存在声明提前，而且允许重复定义，但是这些在es6里都是不允许的。

 //重复定义 
class Animal{
}
//SyntaxError: Identifier 'Animal' has already been declared

//在声明之前使用
var dog = new Animal('dog');// ReferenceError: Animal is not defined

6、class表达式
与函数一样，类也可以使用表达式的形式定义。

const MyClass = class Me {
    getClassName() {
        return Me.name;
    }
}
let init = new MyClass();
console.log(init.getClassName());//Me
console.log(Me.name);//ReferenceError: Me is not defined

上面代码表示，Me只在 Class 内部有定义。如果类的内部没用到的话，可以省略Me，也就是可以写成下面匿名的形式。

const MyClass = class { /* ... */ };

利用class表达式，可以写出立即执行的class

let panda = new class {
    constructor(name) {
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
}('panda');
panda.showName();//panda

7、继承
以前我们想要实现继承，有很多种方法，比如利用call/apply、共享原型、圣杯模式等，但是用起来不是那么方便。在ES6中，可以十分方便的通过extends关键字实现继承。

class Animal {
    constructor(name) {
        this.name = name;
    }
    showName() {
        console.log(this.name);
    }
    static sayHello() {
        console.log('hello', this.name);//这里的this指向类，而不是实例
    }
}
class Person extends Animal {
}
var p = new Person('lily');
p.showName();//lily
Person.sayHello();//hello Person  

上面代码中的Person类中无内容，只是使用extends实现了继承。现在在其内部加上一些代码

class Person extends Animal {
    constructor(name, age = 1) {
        super(name);
        this.age = age;
    }
    showAge() {
        console.log(this.age);
    }
}
var p = new Person('lily');
p.showAge();//1
Person.sayHello();//hello Person  静态方法也会被继承

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
这里有两点需要注意：
1）子类必须在constructor方法中调用super方法，否则新建实例时会报错。如果子类没有定义constructor方法，这个方法会被默认添加。默认this指向当前对象
2）在使用this前必须调用super函数，因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例

另外，super关键字也可以作为对象使用
1）在普通方法中，其指向父类的原型，并自动绑定当前函数的this
2）在静态方法中，指向父类

class Person extends Animal {
    constructor(name, age = 1) {
        super(name);
        this.age = age;
    }
    showAge() {
        console.log(this.age);
    }
    show() {
        super.showName();//super指向父类的原型  Animal.prototype
    }
    static hello(){
        super.sayHello();//super指向父类 这里的this指向当前的子类，不是子类的实例
    }
}
var p = new Person('lily');
p.show();//lily
Person.hello();//hello Person

参考：http://es6.ruanyifeng.com/#docs/class-extends