ZWH ZONE

[ES6 JavaScript] 類別 (Class) 與 建構式 (Constructor)

zhiwei. huang -

之前在學習 JavaScript 建構函式 時，常常被所謂的 類別(Class) 與 建構式 (Constructor) ， 搞得暈頭轉向，趁最近學習 ES6 的機會，好好的釐清這些 物件(Object) 的觀念 ， 在此篇文章也會對 ES6 的新屬性 Class 進行說明：

實體化物件：

在說明使用 類別 (Class) 與 建構式 (Constructor) 之前，先來了解一下 物件導向程式設計(OOP) 的觀念：

物件導向程式設計(OOP)，其實主要有 兩種 類型 :

  • 類別 為基礎 (class-based) 的物件導向
  • 原型 為基礎 (prototype-based) 的物件導向

而 JavaScript 屬於後者，以 原型 (prototype-based) 為基礎的物件導向語言，並沒有像其它 類別基礎 (class-based) 的語言，如：C++ 、 Java ， 有著 Class 的用法

你甚至可能還聽過有人說 JavaScrip 是 沒有 Class 的說法

在 ES6 之前，我們通常是直接使用 建構式 (Constructor) ， 還直接定義一個物件的 模型 ， 再用 new 的運算式去 實體化物件

如下：

function car(color){
 this.color = color;
}

var car1 = car('blue');

類別 (Class) 與 建構式 (Constructor)：

到這裡，你一定會完全分不清楚 類別 (Class) 與 建構式 (Constructor) ，兩者之間的區別，就跟當初閱讀過 MDN 的文件後，觀念還是釐不清的我一樣

下面來簡單語義化說明：

類別 (Class) :

其實可以暫時不先把 類別 (Class) 想得這麼的複雜，把 類別 (Class) 當成是某某東西的 藍圖 或是 設計圖：

假設今天我們畫了一張 車子 的 設計圖，再根據這張 設計圖 製造出 相同規格 的車子， 一方面有設計圖可以提升 車子 的 生產速度 ，也因為有事先有定義統一的規格 ， 每台車子的 品質 也更容易的管理跟維護

上述的舉例說明，也有介紹到為什麼要使用 建構函式

而 類別 (Class) 指的就是我們定義的 設計圖的名稱

建構式 (Constructor)：

建構式 (Constructor) 其實就直接從字面上解釋：

就是使用 new 在建構新物件時，在實體化 物件(Object) 時， 會執行的 函式，我們就稱為 建構式 (Constructor)

建構式 (Constructor) 通常是使用在 初始化物件 也可以用來自訂 類別 (Class) 的 屬性

ES6 語法：class

剛剛在上面的 編碼範例中，是 ES6 之前的寫法，很容易就會是我們搞混 類別 (Class) 與 建構式 (Constructor) 的關係，但在 ES6 中，增加了 class 的語法，在寫法上讓我們對上面兩者之間的關係更好理解，也更直覺，如下：

class car{
  constructor(color){
    this.color = color;
  }
}

var car1 = car('blue');

ES6 的 class 的屬性，解決了我們之前直接使用 建構式 (Constructor) 的方式，會產生的問題：

  • 容易與一般函式混用時造成混亂
  • 如果沒有使用 new 來實體化物件，如：var car1 = car('blue');，程式並不會噴錯，而此時 car1 為 undefind

在 ES6 中的 class(類別) 語法，並不是真的是以 類別為基礎 (class-based) 的物件導向，在骨子裡仍然是以 原型為基礎 (prototype-based) 的物件導向

參考連結：

Mdn web docs :JavaScript 物件導向介紹

iT邦幫忙：Day 10: ES6篇 – Class(類別)

Facebook 功能：