之前在學習 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(類別)

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

Facebook 功能: