2021-05-27

對ES6中類的了解

1.基本使用方法

ES6中引入關鍵詞class，其基本使用方法如下：

程式一：如何在ES6中定義class。

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea();
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
var a = new Rectangle(10,20);
console.log(a);          //Rectangle {height: 10, width: 20}
console.log(a.calcArea());  //200
      

程式二：ES6中如何繼承父類

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

    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }

    speak() {
        console.log(this.name + ' barks.');
    }
}
let a = new Animal('Marry');
console.log(a);        //Animal {name: "Marry"}  Marry makes a noise.
let d = new Dog('Mitzie');
console.log(d);  //  Dog {name: "Mitzie"}
console.log(d.speak());//Mitzie barks.      

ES6中類的基本使用與類的繼承與java中的類的使用方法異曲同工。在類中，均需要定義其屬性個方法，ES6中的屬性在 constructor構造器裡面定義，方法可以使用構造器中傳入的參數。同時繼承的關鍵字使extends。