摘要：傳統(tǒng)做法是當(dāng)生成一個(gè)對(duì)象實(shí)例，需要定義構(gòu)造函數(shù)，然后通過的方式完成。如果子類中有構(gòu)造函數(shù)，則必須使用調(diào)用。這是因?yàn)樽宇悰]有自己的對(duì)象，而是繼承父類的對(duì)象，然后對(duì)其進(jìn)行加工。

javascript傳統(tǒng)做法是當(dāng)生成一個(gè)對(duì)象實(shí)例，需要定義構(gòu)造函數(shù)，然后通過new的方式完成。

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

StdInfo.prototype.getNames = function (){
    console.log("name："+this.name);               
}
//得到一個(gè)學(xué)員信息對(duì)象
var p = new StdInfo()

javacript中只有對(duì)象，沒有類。它是是基于原型的語(yǔ)言，原型對(duì)象是新對(duì)象的模板，它將自身的屬性共享給新對(duì)象。這樣的寫法和傳統(tǒng)面向?qū)ο笳Z(yǔ)言差異很大，很容易讓新手感到困惑。

到了ES6添加了類，作為對(duì)象的模板。通過class來定義一個(gè)類：

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

上面的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法，看起來也更容易理解。

定義的類只是語(yǔ)法糖，目的是讓我們用更簡(jiǎn)潔明了的語(yǔ)法創(chuàng)建對(duì)象及處理相關(guān)的繼承。

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

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

從上面的測(cè)試中可以看出來，類的類型就是一個(gè)函數(shù)，是一個(gè)“特殊函數(shù)”，指向的是構(gòu)造函數(shù)。

函數(shù)的定義方式有函數(shù)聲明和函數(shù)表達(dá)式兩種，類的定義方式也有兩種，分別是：類聲明和類表達(dá)式。

類聲明是定義類的一種方式，使用關(guān)鍵字class，后面跟上類名，然后就是一對(duì)大括號(hào)。把這一類需要定義的方法放在大括號(hào)中。

//定義類，可以省略constructor
class StdInfo {
    getNames(){
        console.log("name："+this.name);
    }
}
// -------------------------------------
//定義類，加上constructor
class StdInfo {
    //使用new定義實(shí)例對(duì)象時(shí)，自動(dòng)調(diào)用這個(gè)函數(shù)，傳入?yún)?shù)
    constructor(name,age){
       this.name = name;            
       this.age = age;      
    }
    
    getNames(){
       console.log("name："+this.name);      
    }
}
//定義實(shí)例對(duì)象時(shí)，傳入?yún)?shù)
var p = new StdInfo("job",30)

constructor是一個(gè)默認(rèn)方法，使用new來定義實(shí)例對(duì)象時(shí)，自動(dòng)執(zhí)行constructor函數(shù)，傳入所需要的參數(shù),執(zhí)行完constructor后自動(dòng)返回實(shí)例對(duì)象。

一個(gè)類中只能有一個(gè)constructor函數(shù)，定義多個(gè)會(huì)報(bào)錯(cuò)。

constructor中的this指向新創(chuàng)建的實(shí)例對(duì)象，利用this往新創(chuàng)建的實(shí)例對(duì)象擴(kuò)展屬性。

在定義實(shí)例對(duì)象時(shí)，不需要在初始化階段做一些事，可以不用顯示的寫constructor函數(shù)。如果沒有顯式定義，一個(gè)空的constructor方法會(huì)被默認(rèn)添加，constructor(){}

類表達(dá)式是定義類的另一種形式，類似于函數(shù)表達(dá)式，把一個(gè)函數(shù)作為值賦給變量?？梢园讯x的類賦值給一個(gè)變量，這時(shí)候變量就為類名。class關(guān)鍵字之后的類名可有可無，如果存在，則只能在類內(nèi)部使用。

定義類 class后面有類名：

 const People = class StdInfo {
    constructor(){
        console.log(StdInfo);  //可以打印出值，是一個(gè)函數(shù)
    }
}

new People();
new StdInfo();  //報(bào)錯(cuò)，StdInfo is not defined；

定義類 class后面沒有類名：

const People = class {
    constructor(){

    }
}

new People();

立即執(zhí)行的類：

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

立即執(zhí)行的類，在類前要加上new。p為類的實(shí)例對(duì)象。

定義類不存在變量提升，只能先定義類后使用，跟函數(shù)聲明有區(qū)別的。

//-----函數(shù)聲明-------
//定義前可以先使用，因?yàn)楹瘮?shù)聲明提升的緣故，調(diào)用合法。
func();
function func(){}

//-----定義類---------------
new StdInfo();  //報(bào)錯(cuò)，StdInfo is not defined
class StdInfo{}

使用extends關(guān)鍵字實(shí)現(xiàn)類之間的繼承。這比在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();

//可以調(diào)用父類的方法
c.speakSometing(); // I can speek chinese

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

如果子類中有constructor構(gòu)造函數(shù)，則必須使用調(diào)用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){
        //不調(diào)super()，則會(huì)報(bào)錯(cuò)  this is not defined

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

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

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

//可以調(diào)用父類的方法
c.speakSometing(); // I can speek chinese

子類必須在constructor方法中調(diào)用super方法，否則新建實(shí)例時(shí)會(huì)報(bào)錯(cuò)(this is not defined)。這是因?yàn)樽宇悰]有自己的this對(duì)象，而是繼承父類的this對(duì)象，然后對(duì)其進(jìn)行加工。如果不調(diào)用super方法，子類就得不到this對(duì)象。

以上是對(duì)ES6中類的簡(jiǎn)單總結(jié)學(xué)習(xí)，歡迎一起討論。

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

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