class

类这个东西原来只在我练习面试题和学习canvas的时候做一些小游戏时才会用到。直到一天要去读到同事写的代码，发现他大量地用到类。后来又在自学java的时候，终于明白。为什么在es6 Class终于要被提上进程了。

更好地组织代码

像我们在用Vue写页面的时候，我们会把数据存在data中，然后当中存放一些对象数据来代表我们页面中的组件内容。组件来操作这些数据。但当我们的页面内容越来越丰富之后，data会变得很庞大。当然为了操作这些data我们还需要有对应的methods来操作。慢慢的这个vue文件就会变得越来越难掌握。
这时候假如用class的思路想一下，一个组件或者一个局部的页面块。我们用class来处理，数据和操作方法存在实例本身。这样不仅减少了代码量。整体项目看起来，把握项目内容的难度也会减少。（其实就是vue文件与Vue的关系一样）

ES6 class

class这个其实是语法糖，在我们学习构造函数的时候，我们知道想要做出一样效果，我们需要

function People(name,age){ this.name = name; this.age = age; }// 假如需要添加函数还要People.prototype.say=function（）{    console.log("hello)}

而class为我们提过了一个很简单的写法

    class People{        constructor(name,age){            this.name = name;            this.age = age;        }        say(){            console.log("hello)        }    }    // 创造实例    let a = new People("tom",23);

注意：class没有声明提升，声明必须写在前。而构造函数有声明提示。

constructor

constructor用来创建和初始化一个由class创建的对象。一个类只能拥有一个名为 “constructor”的特殊方法。他用来接受class在被创建的时候传入的参。并且他本身负责构建属于他的数据结构。

static

static是class的静态方法。写法是：

 class Animal {   speak() {    return this;  }  // 与其他方法同层  static eat() {    return this;  }}

class里的一般方法，一般用于调用或者修改操作实例里的数据。而静态方法一般与数据关系不大，是一个类的通用方法。调用方法也是直接在类中调用。

    //一般方法    let obj = new Animal();    obj.speak(); // Animal {}    let speak = obj.speak;    speak(); // undefined    //静态方法    Animal.eat() // class Animal    let eat = Animal.eat;    eat(); // undefined

extends

class可以继承class,就是所谓的大类小类。

// 先创建动物类class Animal {   constructor(name) {    this.name = name;  }    speak() {    console.log(this.name + ' makes a noise.');  }}// 再创建狗类，它继承动物类class Dog extends Animal {    constructor(){        super();    }  speak() {    console.log(this.name + ' barks.');  }}var d = new Dog('Mitzie');d.speak();// 'Mitzie barks.'

super

首先，ES6 要求，子类的构造函数必须执行一次super函数。而super有两种用法。1，做函数。2，做对象。
1.super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。

class A {}class B extends A {  constructor() {    super();  }}

2.做对象。做对象时它指向父类的构造函数，可以调用它的静态方法，方法等。

class Human {  constructor() {}  static ping() {    return 'ping';  }}class Computer extends Human {  constructor() {}  static pingpong() {    return super.ping() + ' pong';  }}Computer.pingpong(); // 'ping pong'