es6 - 類

es6 類-class

與大多正規的面向對象編程語言不一樣(好比java)，js在建立之初就不支持類。js的面向對象編程實現方式是經過構造函數和原型來實現的。

我以前覺得es6引入類的概念將會帶給這門語言極大的改變。後來才發現es6類的特性只是一種語法糖，使得js建立自定義類型和傳統的面嚮對象語言語法上更爲類似，其內部機理和以前構造函數-原型模式本質上是同樣的。可是，es6 類的特性依然是值得掌握的，它使得js語言更加的嚴謹，消除了一些可能致使出錯的情況。

語法

類的建立依賴於class和constructor兩個關鍵字，下面介紹下類建立的語法。

建立自定義類型

看下面一段代碼：

class Person{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.log(this.name);
    }
}

上面代碼使用class建立了一個自定義類型Person，constructor是這個類的構造器，sayName是類的公共方法。它和下面一段代碼是等價的。

function Person(name, age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name);
}

兩者在使用上徹底相同，好比：建立一個Person的實例 new Person('icode007')等。一些小的差異主要有下面幾點：

• 使用class建立的類只能使用new來調用，然後者能夠做爲普通函數調用。
• class沒有聲明提高，後者做爲函數會有聲明提高。
• 類聲明中的代碼自動運行在嚴格模式下。
• 類的全部方法都是不可枚舉的。

類表達式

與函數相似，類也具備兩種形式，類聲明和類表達式。

let Person = class{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    sayName(){
        console.log(this.name);
    }
}

let person = new Person('icode007');

類表達式在使用上與類聲明幾乎沒有區別。

類的訪問器屬性

使用get和set關鍵字能夠爲類定義訪問器屬性。

let Person = class{
    constructor(firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    get fullname(){
        return this.firstname + this.lastname;
    }
    set fullname(name){
        var arr = name.split(' ');
        this.firstname = arr[0];
        this.lastname = arr[arr.length - 1];
    }
}
let person = new Person('nicholas', 'zakas');
console.log(person.fullname);

類的靜態成員

要定義類的靜態方法，只須要在公共方法定義前加static關鍵字便可。如：

let Person = class{
    constructor(firstname, lastname){
        this.firstname = firstname;
        this.lastname = lastname;
    }
    static getFullname(){
        return this.firstname + this.lastname;
    }
}

要使用該靜態方法，須要直接在類上調用，好比Person.getFullname()。

類的繼承

es6的類使用extends來實現繼承。例如：

class Rectangle{
    constructor(length,width){
        this.length = length;
        this.width = width;
    }
    getArea(){
        return this.length * this.width;
    }
}

class Square extends Rectangle {
    constructor(length){
        super(length, length);
    }
    getPerimeter(){
        return this.length * 4;
    }
}
var sqr = new Square(5);
console.log(sqr.getArea()

上面代碼中，類Square繼承了Rectangle類，因此實例sqr一樣具備getArea()方法。 同時sqr添加了本身的getPerimeter方法。並重寫了構造器constructor。

注意事項

在使用類繼承的實現中，須要注意的點是：

• 若是子類沒有重寫constructor方法，默認會調用父類的構造器方法。
• 若是重寫了constructor方法，那麼須要顯式的調用父類的構造器方法，即super(arg...)，而且super()調用必定要放到構造器的最前面(準確的說是在使用this前須要調用super)。
• 父類的靜態成員一樣會被繼承到子類上。

最佳實踐

es6的類的語法比較易於掌握，推薦在實際開發中，多使用class來建立自定義類型。 首先會使關於類的信息都包裹在一個class{}中，也會使得js中的類與其餘語言的類的語法更加的統一。

更多關於es6的內容，能夠關注右側專欄 - 學習ES6。