初探 JavaScript 的 class 語法

前言

  最近發現新的 JavaScript 有支援 class 語法，所以就來做個學習，在此做個紀錄。

內容

  先看以下範例

class MyClass{
  constructor(){
    this.publicMember = 'public';
    this._privateMember = 'private';
    this._propertyName = '';
    console.log( 'MyClass.constructor()' );
  }
  publicCall(){
    console.log( 'MyClass.publicCall()');
  }
  _privateCall(){
    console.log( 'MyClass._privateCall()');
  }
  get name(){
    return this._propertyName;
  }
  set name( newName ){
    this._propertyName = newName;
  }
  static staticCall(){
    console.log( 'MyClass.staticCall()');
  }
}
//
class MyExtendClass extends MyClass{
  constructor(){
    super();//Not super.constructor()!
    console.log( 'MyExtendClass.constructor()' );
  }
  publicCall(){
    console.log( 'MyExtendClass.publicCall()');
  }
}
//
MyClass.staticCall();//"MyClass.staticCall()"
let a = new MyClass();
a.name = 'Hello';
console.log( a.name );//"Hello"
a.publicCall();//"MyClass.publicCall()"

//
let b = new MyExtendClass();
b.name = 'Hello Extends';
console.log( b.name );//"Hello Extends"
b.publicCall();//"MyExtendClass.publicCall()"

這次的範例有"MyClass"與"MyExtendClass"，兩者為繼承關係，在 class 可以看到 constructor() ，這是語法並不能自己改，如果熟悉 OOP 應該可以猜的到是"建構式"，設定變數可以透過"this"，跟舊的寫法一樣，但要注意 class 並不支援任何 private 的成員與方法，所以用了一個變通的方法就是在 private 的成員與方法錢加一個"_"來區隔是 public 或 private  ，最後會看到"_propertyName"這個成員， class 的語法有支援 get 與 set 來取得屬性，寫法相當直覺，僅需加  get 或 set 的語法再加上屬性名稱就可以新增，方法的部分也是用類似的方法來加，但前方不需要加任何關鍵字，static 的寫法也相當簡單，在方法前用 static 來區分即可。接著看到雞城的類別"MyExtendClass"，這裡注意建構式的地方是如何喚起子類別的建構式，是 super() 而非 super.constructor() ，MyExtendClass.publicCall() 會發生 override ，如果要換起子類別的方法依舊可以透過 super 來喚起。

  總體來說語法相當簡潔與直觀，舊的寫法可是很容易需要寫一堆 prototype ，造成行數很能縮短讓程式碼看起來很雜，不過不支援 private 這樣的能見度算是小小的缺陷，比較訝異的是 property 的支援，因為舊的寫法雖然可以有 property ，但看起來就是個 funciton ，不能直接向變數一樣直接指派，而且 get 和 set 還要命兩種不同的名稱，這次的語法可以改善這樣的缺陷。

參考資料

[ developer.mozilla.org ] Classes