聊一聊ES6中class的使用

javascript傳統作法是當生成一個對象實例，須要定義構造函數，而後經過new的方式完成。

function StdInfo(){
    this.name = "job";            
    this.age = 30;            
}

StdInfo.prototype.getNames = function (){
    console.log("name："+this.name);               
}
//獲得一個學員信息對象
var p = new StdInfo()

javacript中只有對象，沒有類。它是是基於原型的語言，原型對象是新對象的模板，它將自身的屬性共享給新對象。這樣的寫法和傳統面嚮對象語言差別很大，很容易讓新手感到困惑。

定義類

到了ES6添加了類，做爲對象的模板。經過class來定義一個類：

//定義類
class StdInfo {
    constructor(){
       this.name = "job";            
       this.age = 30;      
    }
    //定義在類中的方法不須要添加function
    getNames(){
       console.log("name："+this.name);      
    }
}
//使用new的方式獲得一個實例對象
var p = new StdInfo();

上面的寫法更加清晰、更像面向對象編程的語法，看起來也更容易理解。

定義的類只是語法糖，目的是讓咱們用更簡潔明瞭的語法建立對象及處理相關的繼承。

//定義類
class StdInfo {
    //...
}
console.log(typeof  StdInfo);  //function

console.log(StdInfo === StdInfo.prototype.constructor);  //true

從上面的測試中能夠看出來，類的類型就是一個函數，是一個「特殊函數」，指向的是構造函數。

函數的定義方式有函數聲明和函數表達式兩種，類的定義方式也有兩種，分別是：類聲明和類表達式。

類聲明

類聲明是定義類的一種方式，使用關鍵字class，後面跟上類名，而後就是一對大括號。把這一類須要定義的方法放在大括號中。

//定義類，能夠省略constructor
class StdInfo {
    getNames(){
        console.log("name："+this.name);
    }
}
// -------------------------------------
//定義類，加上constructor
class StdInfo {
    //使用new定義實例對象時，自動調用這個函數，傳入參數
    constructor(name,age){
       this.name = name;            
       this.age = age;      
    }
    
    getNames(){
       console.log("name："+this.name);      
    }
}
//定義實例對象時，傳入參數
var p = new StdInfo("job",30)

constructor是一個默認方法，使用new來定義實例對象時，自動執行constructor函數，傳入所須要的參數,執行完constructor後自動返回實例對象。

一個類中只能有一個constructor函數，定義多個會報錯。

constructor中的this指向新建立的實例對象，利用this往新建立的實例對象擴展屬性。

在定義實例對象時，不須要在初始化階段作一些事，能夠不用顯示的寫constructor函數。若是沒有顯式定義，一個空的constructor方法會被默認添加，constructor(){}

類表達式

類表達式是定義類的另外一種形式，相似於函數表達式，把一個函數做爲值賦給變量。能夠把定義的類賦值給一個變量，這時候變量就爲類名。class關鍵字以後的類名無關緊要，若是存在，則只能在類內部使用。

定義類 class後面有類名：

const People = class StdInfo {
    constructor(){
        console.log(StdInfo);  //能夠打印出值，是一個函數
    }
}

new People();
new StdInfo();  //報錯，StdInfo is not defined；

定義類 class後面沒有類名：

const People = class {
    constructor(){

    }
}

new People();

當即執行的類：

const p = new class {
    constructor(name,age){
        console.log(name,age);
    }
}("job",30)

當即執行的類，在類前要加上new。p爲類的實例對象。

不存在變量提高

定義類不存在變量提高，只能先定義類後使用，跟函數聲明有區別的。

//-----函數聲明-------
//定義前能夠先使用，由於函數聲明提高的緣故，調用合法。
func();
function func(){}

//-----定義類---------------
new StdInfo();  //報錯，StdInfo is not defined
class StdInfo{}

extends繼承

使用extends關鍵字實現類之間的繼承。這比在ES5中使用繼承要方便不少。

//定義類父類
class Parent {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    speakSometing(){
        console.log("I can speek chinese");
    }
}
//定義子類，繼承父類
class Child extends Parent {
    coding(){
        console.log("coding javascript");
    }
}

var c = new Child();

//能夠調用父類的方法
c.speakSometing(); // I can speek chinese

使用繼承的方式，子類就擁有了父類的方法。

若是子類中有constructor構造函數，則必須使用調用super。

//定義類父類
class Parent {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    speakSometing(){
        console.log("I can speek chinese");
    }
}
//定義子類，繼承父類
class Child extends Parent {
    constructor(name,age){
        //不調super()，則會報錯  this is not defined

        //必須調用super
        super(name,age);
    }

    coding(){
        console.log("coding javascript");
    }
}

var c = new Child("job",30);

//能夠調用父類的方法
c.speakSometing(); // I can speek chinese

子類必須在constructor方法中調用super方法，不然新建實例時會報錯(this is not defined)。這是由於子類沒有本身的this對象，而是繼承父類的this對象，而後對其進行加工。若是不調用super方法，子類就得不到this對象。

以上是對ES6中類的簡單總結學習，歡迎一塊兒討論。

參考：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

http://es6.ruanyifeng.com/#docs/class