ECMAScript 2015 (ES6) class

 

在ES6之前，JavaScript 就有類似物件導向語法，一個 JavaScript Object Constructor 範例如下

function Person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

console.log(myFather.firstName);
console.log(myMother.firstName);

 

一、ES6 class

而到了 ES6，定義了 class 語法，還真得蠻像在操作一個物件的感覺，

此時，我有一個感觸，各家程式語言的特性，其實都是互相參考來參考去的。

class Person {
    constructor(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    GetFullName() {
        console.log(this.firstName + " " + this.lastName);
    }
}

const myFather = new Person("John", "Doe", 50, "blue");
myFather.GetFullName();

class 與 constructor 都是關鍵字是 case sensitive。

 

在 constructor 裡也可以放置 function

class Person {
    constructor(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
        this.reset = function () {
            this.firstName = "";
            this.lastName = "";
            this.age = "";
            this.eyeColor = "";
        };
    }

    GetFullName() {
        console.log(this.firstName + " " + this.lastName);
    }
}

var myFather = new Person("John", "Doe", 50, "blue");
myFather.GetFullName();
myFather.reset();
myFather.GetFullName();

 

二、Getter 與 Setter

class MyObject {
    constructor(key, value) {
        this.key = '_' + key;
        if (typeof key != 'undefined') {
            this[this.key] = value;
        }
    }

    get value() {
        if (this[this.key] !== undefined) {
            return this[this.key]
        } else {
            return 'no color prop';
        }
    }

    set value(value) {
        this[this.key] = value;
    }
}

var dictionary1 = new MyObject('color', 'red');
console.log("key " + dictionary1.key + "'s value is " + dictionary1.value);

var dictionary2 = new MyObject('action', 'run');
console.log("key " + dictionary2.key + "'s value is " + dictionary2.value);

在 class 裡，也可以使用 Getter 與 Setter。

 

三、Static

class Student {
    constructor(id, firstName, lastName) {
        this.id = id;
        this.firstName = firstName;
        this.lastName = lastName;
        //這裡呼叫靜態方法，每次建構出一個學生實體就執行一次
        Student._countStudent();
    }
    //靜態方法的定義
    static _countStudent() {
        if (this._numOfStudents === undefined) {
            this._numOfStudents = 1;
        } else {
            this._numOfStudents++;
        }
    }
    //用getter與靜態方法取出目前的學生數量
    static get numOfStudents() {
        return this._numOfStudents;
    }

}
const aStudent = new Student(11, 'Eddy', 'Chang');
console.log(Student.numOfStudents);
const bStudent = new Student(22, 'Ed', 'Lu');
console.log(Student.numOfStudents);

範例僅供參考。

 

四、extends

class Ball {
    constructor(radius, weight) {
        this.radius = radius;
        this.weight = weight;
    }
    Show() {
        return "radius=" + this.radius + ",weight=" + this.weight;
    }
}

class Baseball extends Ball {
    constructor(surface, radius, weight) {
        super(radius, weight);
        this.surface = surface;
    }

    Show() {
        return "surface=" + this.surface + "," + super.Show();
    }
}

var myBaseball = new Baseball("circle", "5cm", "100g");
console.log(myBaseball.Show());

說明：

1、extends 與 super 關鍵字都是 case sensitive。

2、super 關鍵字用來表示存取父類別的方法與屬性，也包含父類別的 construtor。

3、子類別中的建構式，super()需要放在子類別建構式裡的第一行。

4、當呼叫子類別中的屬性與方法時，都會覆蓋掉原有的在父類別中的同名稱屬性或方法，

可用 super 關鍵字來存取父類別中的屬性或方法。

 

參考資料：

原型基礎物件導向