[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'