ES6的class概念(2018-06-20)

     一直以來，開發者都是使用函式function和原型prototype來模擬類class實現物件導向的程式設計。ES6給我們帶來了好訊息，它給JavaScript帶來了類class的概念。但實際上，JavaScript的類class本質上也是基於原型prototype的實現方式做了進一步的封裝，讓我們使用起來更簡單明瞭。也就是說它實際上也是函式function和原型prototype實現。

基本用法

宣告一個類：

    //定義一個叫Animal的類
    class Animal {        //建構函式constructor
        constructor(color){            this.color = color;
        }
    }

     程式碼很簡短，我們透過關鍵字class來宣告一個名字叫Animal的類，可以看到類裡面（花括號 {}裡面）有一個叫constructor方法，它就是構造方法，構造方法裡面的this，指向的是該類例項化後的物件，這就是實現了一個類的宣告。
     其中，構造方法constructor是一個類必須要有的方法，預設返回例項物件；建立類的例項物件的時候，會呼叫此方法來初始化例項物件。如果你沒有編寫constructor方法，執行的時候也會被加上一個預設的空的constructor方法。

類的屬性和方法

    class Animal {        //構造方法
        constructor(name){            //屬性name
            this.name = name;
        }        //自定義方法getName
        getName(){            return this.name;
        }
    }

     我們把類名後面的括號{ }裡面的內容稱之為類體，我們會在類體內來編寫類的屬性和方法。上面的案例中，類體內有2個方法：constructor( )、getName()。

類的例項物件

    class Animal {        //構造方法
        constructor(name){            //屬性name
            this.name = name;
        }        //自定義方法getName
        getName(){            return 'This is a'+this.name;
        }
    }    //建立一個Animal例項物件dog
    let dog = new Animal('dog');
    dog.name; //結果：dog
    dog.getName(); //結果：This is a dog

     還是同一個類Animal，我們透過new來建立了例項物件dog，構造方法會把傳進去的引數“dog”透過this.name賦值給物件的name屬性，所以dog的name屬性為“dog”，物件dog還可以呼叫自己的例項方法getName( )，結果返回：“This is a dog”。
     注意:
1、必須使用new建立字來建立類的例項物件
2、先宣告定義類，再建立例項，否則會報錯

類的靜態方法

     直接使用類名即可訪問的方法，我們稱之為“靜態方法”。

    class Animal {        //構造方法
        constructor(name){            //屬性name
            this.name = name;
        }        //自定義一個靜態方法
        static friends(a1,a2){            return `${a1.name} and ${a2.name} are friends`;
        }
    }    //建立2個例項
    let dog = new Animal('dog');    let cat = new Animal('cat');    
    //呼叫靜態方法friends
    Animal.friends(dog,cat);    //結果：dog and cat are friends

     靜態方法和例項方法不同的是：靜態方法的定義需要使用static關鍵字來標識，而例項方法不需要；此外，靜態方法透過類名來的呼叫，而例項方法透過例項物件來呼叫。

類的繼承

     ES6使用extends關鍵字來實現子類繼承父類。

    //父類Animal
    class Animal {//...}

    //子類Dog
    class Dog extends Animal {        //構造方法
        constructor(name,color){            super(name);            this.color = color;
        }
    }

     Animal類作為父類，Dog類作為子類，然後透過關鍵字extends來實現繼承，此外，我們還注意到一個關鍵字super，它相當於是父類中的this。

    //父類Animal
    class Animal {        //構造方法
        constructor(name){            //屬性name
            this.name = name;
        }        
        //父類的自定義方法
        say(){            return `This is a animal`;
        }
    }    //子類Dog
    class Dog extends Animal {        //構造方法
        constructor(name,color){            super(name);            this.color = color;
        }        //子類的例項方法
        getAttritube(){            return `${super.say()},
                    name：${this.name},
                    color:${this.color}`;
        }
    }    //建立Dog的例項物件
    let d = new Dog("dog","black");    //呼叫子類的Dog的例項方法
    d.getAttritube();    //結果：
      This is a animal,
      name：dog,      color:black

     使用super有幾個要注意的事項：
1、子類必須在constructor方法中呼叫super方法
2、必須先呼叫super( )，才可以使用this，否則報錯

作者：a小磊_
連結：