ECMAScript6入門--Class對象

面向對象的語言有一個標誌，那就是他們都有類的概念，經過類能夠建立任意多個具備相同屬性和方法的對象。

ECMAScript5中沒有類的概念，所以它的對象和基於類的語言中的對象有所不一樣。

Javascript生成對象的傳統方法是經過構造函數來實現的

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        return "Hello "+ this.name;
    }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

上述這種方式由於和Javascript中聲明方法的形式同樣，因此對象和方法的區分並不明顯，很容易形成混淆。

ES6引入了Class(類)的概念，咱們經過ES6的語法進行建立對象的時候，能夠像Java語法同樣，使用關鍵字class，用來定義類。固然，這種語法的功能，經過ES5也均可以實現，它只是讓類的定義更加清晰，更容易理解。

//類的定義
class Person {
    //ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //實例方法
    sayName() {
        console.log("個人名字叫"+ this.name);
    }
}
//類的繼承
class Programmer extends Person {
    constructor(name) {
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        cosnole.log("這是個人地盤");
    }
}
//運行測試
var person = new Person('lingxiao');
var coder = new Programmer('coder');

person.sayName();
//個人名字叫lingxiao
coder.sayName();
//個人名字叫coder
coder.program();
//這是個人地盤

下面來注意講述一下上述代碼中出現的語法。

constructor

constructor是類的默認方法，就像Java中的main方法同樣，每一個類都必須有constructor方法。

在經過new實例化對象的時候，就會自動調用constructor方法，獲得的也就是constructor返回的值。constructor默認返回當前類的實例對象（this），可是咱們也能夠指定另一個對象，固然，這樣就會致使實例化出來的對象，並非當前類的實例。

class Person {
    constructor(){
        var ob = new Object();
        return Ob;
    }
    sayHello(){
        return "Hello World"
    }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

咱們在實例化對象的時候，ES6規定我使用new關鍵字，若是直接調用，會當成函數來調用。

class Person {
    constructor(name){
        this.name = name;
    }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'

this

在最開始的代碼中，咱們看到了this，this在類中指向的就是實例自己，可是若是咱們在類的方法中使用了this，單獨調用此方法的時候，就會出現錯誤。

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello() {
        return "Hello "+this.name
    }
}
var person  =  new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property 'name' of undefined

針對這個咱們能夠很簡單的在構造方法中綁定this

class Person{
    constructor(name){
        this.name = name;
        this.sayHello = this.sayHello.call(this);
    }
    sayHello() {
        return "Hello "+this.name
    }
}

繼承extend

咱們想要在一個類上擴展一些屬性，但又不想修改原類，就用到了繼承。

//類的繼承
class Programmer extends Person {
    constructor(name,age) {
        this.age = age;//報錯
        //直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        cosnole.log("這是個人地盤");
    }
}

使用繼承的時候，須要用super關鍵字來調用父類，super(name)就呆逼啊調用父類的constructor方法。

另外，咱們使用的繼承的時候，super關鍵字也幫咱們改變了this的指向，因此咱們必需要先調用super方法，而後才能使用this。ES6要求，子類的構造函數必須執行一次super函數，不然就會報錯。

最後

class關鍵字的出現，也讓Javascript看上去更加像一個面嚮對象語言，願Javascript越變越好越易用。