ES6系列_15之class類的使用

JS語言的傳統方法是經過構造函數，定義並生成新對象，是一種基於原型的面向對象系統。在ES6中新增長了類的概念，能夠使用 class 關鍵字聲明一個類，以後以這個類來實例化對象。
1.先來看看es5與es6的寫法：
（1）構造函數示例：

const Animal = function (name, age) {
    this.name= name;
    this.age = age;
    return this;
};

Animal.prototype = {
    constructor: Animal,
    print: function () {
        console.log(this.name+ ' ' + this.age);
    }
};


const panda= new Animal('熊貓', '3').print();

 （2）使用ES6提供的class改寫爲：

class Animal {
    constructor(name,age){
        this.name=name;
        this.age=age;
        return this;
    }

    print(){
        console.log(this.name+''+this.age);
    }
}

const panda=new Animal('熊貓', '3');
panda.print()

2.如今來看看es6的類如何使用？

（1）類的聲明

先聲明一個最簡單的Animal類，類裏只有一個print方法，方法中打印出傳遞的參數。

class Animal{
    print(val){
        console.log(val);
    }
}

（2）類的使用

咱們已經聲明瞭一個類，並在類裏聲明瞭print方法，如今要實例化類，並使用類中的方法。

class Animal{
    print(val){
        console.log(val);
    }
}
let p= new Animal();
p.print('熊貓');

輸出結果爲：熊貓。

    （2.1）類的多方法聲明

咱們在上述基礎上在聲明一個eat方法。

class Animal{
    print(val){
        console.log(val);
    }
    eat(val){
        console.log(this.print("熊貓"),"eat===>",val)
    }
}
let panda= new Animal();

panda.eat("竹子")

此時咱們會發現輸出的結果爲：

也就是this.print("熊貓") 這句代碼出現了undefined。這是爲啥呢?

這是因爲類中的print方法沒有返回值形成的，咱們給print方法返回值，代碼以下：

class Animal{
    print(val){
        console.log(val);
        return val;
    }
    eat(val){
        console.log(this.print("熊貓"),"eat===>",val)
    }
}
let panda= new Animal();

panda.eat("竹子")

此時的結果爲：

這裏須要注意的是兩個方法中間不要寫逗號了，還有這裏的this指類自己，還有 使用return返回值。

（3） 類的傳參

在類的參數傳遞中咱們用constructor( )進行傳參。傳遞參數後能夠直接使用this.xxx進行調用。

 例如一開始時咱們改寫的代碼同樣，如今再把該代碼貼出以下：

class Animal {
    constructor(name,age){
        this.name=name;
        this.age=age;
        return this;
    }

    print(){
        console.log(this.name+''+this.age);
    }
}

const panda=new Animal('熊貓', '3');
panda.print()

使用constructor來約定了傳遞參數，而後在print方法中打印。

（4）class的繼承

類的一大特色就是繼承。ES6中也有繼承，使用關鍵子extends。

例如，如今有一個動物，除了基本的姓名與年齡外，還有獨特的愛好--唱歌，咱們該怎麼處理呢，這裏用到了類的繼承，代碼以下：

class Bird extends Animal{
    sing(val){
        console.log("唱",val)
    }
}

let bird=new Bird("鸚鵡",3)
bird.sing("國歌")

輸出結果爲：

未完，待續。。。。