[ES6 JavaScript] 類別(Class) 與建構式(Constructor) - zwh.zone

之前在學習JavaScript 建構函式 時，常常被所謂的 類別(Class) 與 建構 ... 建構式(Constructor) 的關係，但在 ES6 中，增加了 class 的語法，在寫法 ... 之前在學習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的運算式去實體化物件 如下： functioncar(color){ this.color=color; } varcar1=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的語法，在寫法上讓我們對上面兩者之間的關係更好理解，也更直覺，如下： classcar{ constructor(color){ this.color=color; } } varcar1=car('blue'); ES6的class的屬性，解決了我們之前直接使用建構式(Constructor)的方式，會產生的問題： 容易與一般函式混用時造成混亂 如果沒有使用new來實體化物件，如：varcar1=car('blue');，程式並不會噴錯，而此時car1為undefind 在ES6中的class(類別)語法，並不是真的是以類別為基礎(class-based)的物件導向，在骨子裡仍然是以原型為基礎(prototype-based)的物件導向 參考連結： Mdnwebdocs:JavaScript物件導向介紹 iT邦幫忙：Day10:ES6篇–Class(類別) Facebook功能： PreviousPost NextPost Youmightalsolike...