Table of Contents

• 物件導向程式設計（Object-oriented programming）
• class的用法
  • class的prototype
  • 在class中省略建構函式
  • 把class寫進某個變數裡
  • 使用getter/setter
• References

物件導向程式設計（Object-oriented programming）

在不同的程式設計中（Programming paradigm），物件導向程式設計以OOP來縮寫，它是具有物件概念的程式設計方法，將資料封裝在物件裡面，並操作物件本身。
重要的物件導向語言包含：Common Lisp、Python、C++、Objective-C、Smalltalk、Delphi、Java、Swift、C#、Perl、Ruby、JavaScript 與 PHP等。

在OOP中，class跟prototype是兩種常見的類型，而JavaScript就是基於prototype的物件導向，也因為這樣提供了類似class為導向的一些功能，而今天就要來講JavaScript的class怎麽使用。
要注意的是，即使JavaScript有class這個語法，但本質上依然是prototype為基礎的程式語言。

class的用法

class是一個特別的函式，就像函式有分陳述式與表達式，class也有分陳述與表達，一樣需要使用new來實例化物件。另外還有幾點：

1. 即使沒有使用嚴格模式，依然會以嚴格模式執行class。
2. class需要先宣告才能使用，因此沒有[hoisting]。(https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
3. 在同一個scope裡面，不能重複宣告一樣的class。

先使用原本的建構函式，並且執行一次：

function Contestant (id,name) {
  this.contestantId = id;
  this.contestantName = name;
  this.sayName = function(){
      return `My name is ${this.contestantName}`
    }
}

const contestant1 = new Contestant(1,'Alice')
console.log(contestant1);
//
//Contestant {
//  contestantId: 1,
//  contestantName: 'Alice',
//  sayName: [Function (anonymous)]
//}
console.log(contestant1.sayName());//My name is Alice.

把上面的函式改成class的語法，會發現初始化的建構方法跟其他方法分開來：

class Contestant {
  constructor(id,name){
    this.contestantId = id;
    this.contestantName = name;
  }

  sayName(){
    return `My name is ${this.contestantName}.`
  }
}

const contestant1 = new Contestant(1,'Alice')
console.log(contestant1);//Contestant { contestantId: 1, contestantName: 'Alice' }
console.log(contestant1.sayName());//My name is Alice.

class的prototype

剛才也有提到class是一個特殊函式，讓我們來看一下他的prototype：

會發現除了constructor會明確告示class，sayName()變成Contestantprototype中的方法了。

在class中省略建構函式

如果不需要property，也可以只寫方法。

class Contestant {
  sayName(){
    return `My name is Alice`
  }
}

const contestant1 = new Contestant();
console.log(contestant1.sayName());

把class寫進某個變數裡

//寫成匿名class
const Contestant = class {
  constructor(id,name){
    this.contestantId = id;
    this.contestantName = name;
  }

  sayName(){
    return `My name is ${this.contestantName}.`
  }
}

//class名稱與變數名稱分開
const addNewContestant = class Contestant {
  constructor(id,name){
    this.contestantId = id;
    this.contestantName = name;
  }

  sayName(){
    return `My name is ${this.contestantName}.`
  }
}

使用getter/setter

昨天從屬性描述器中提到的getter/setter也可以用在class：

class Contestant {
  constructor(name){
    // this.contestantId = id;
    this.contestantName = name;
  }

  get sayName(){
    return this.contestantName;
  }

  set sayName(name){
    return `My name is ${name}.`
  }
}
const contestant1 = new Contestant('Alice')
console.log(contestant1.sayName);

References

原型基礎物件導向
D17 - 吃一顆 Class 語法糖 （上）
JavaScript | ES6 中最容易誤會的語法糖 Class - 基本用法
Class basic syntax

• MDN

1. OOP
2. Object-oriented programming
3. Classes in JavaScript
4. Classes
5. class
6. constructor

• wiki

1. 程式設計法
2. 物件導向程式設計
3. 基於原型編程