[Javascript]Class该怎么用？

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'