ES6 Class keyword

• class 可以是 statement
• class 可以是 expression
• class 也可以是 anonymous （我不確定你會不會被 fire）

class 要仔細介紹可能又要一篇了，這邊不「介紹」，
想暸解可以先去看書 this & object prototypes/apA.md。

Class 在 Spec. 裡面有自己一堆很複雜的功能，
不是像多數人簡稱「語法糖」。

之所以這邊要提一點 Class ，主要還是要說 this 在 Class 裡面的故事。

這邊的 this 規則和昨天說的一模一樣，

昨天：
Kyle 整理 new keyword 的行為

1. 講過了
2. 「Link」是 Kyle 的看法，因為 JavaScript 是 Prototype-based 來強調不是 OOP
3. 重點是 call function 和 this 都會放到前面的 new object
4. function 都要 return ，不過如果沒有指定， return 的預設會變成 this

但很顯然，和使用「完全體的Class」還差一步。

在 Class 裡面的 this 可能和你用 OOP 經驗的 this 不太一樣

你需要像是 line 4 一樣，自己綁定 this。
因為回過頭來雖然有 this 語法，但 JavaScript 依然是 JavaScript，
prototype-based language。

Kyle 實作一個雛形，比較「類似」現代前端框架裡面常用的技巧

實作的使用像是這樣：

Gist 上有 code 可以參考

有人在 TC39 提案，真的很喜歡在 JavaScript 寫純 OOP 可以關注一下進度。

小結：

Kyle 還是不斷強調，在 JavaScript 裡面使用 Class 真的不是好主意。

React 在 16.8 之前，沒有太完善的 Function-style 支援，
但最近一系列 hook 都是讓 Function-style 在真實世界的開發 的運用變的比較完整。

React 團隊也收回饋，太多人寫 Class-style 最先遇到的問題就是 this ，
因為看到 Class 又看到 JavaScript 裡面的 Class 儼然自成體系，
就很高興把其他寫程式的 OOP 經驗拿來用，
結果遇到 this 直接爆炸，

JavaScript 的 this 早就規劃好拉～ （昨天提的 4 種）。

React 團隊也很無奈，這是基礎 JavaScript 的問題，
Vue.js 作者尤雨溪，也在 VueConf CN 2019 提到：

「
你在寫 UI 元件的時候很少會用到 繼承 這樣的邏輯複用方式，
在 UI 裡面更多的是需要去組合邏輯。
」

所以你可以看到 Vue, React 在後續的版本，漸漸轉向擁抱 Kyle 心目中 JavaScript 的 DNA ，

盡量以 原生JavaScript 的方式去開發

目前來看比較好的風格，也就是 functional programming 的風格。

簡單列幾點 JavaScript 之中，functional style 比 OOP-Class style 好的觀點給各位
這邊就不是 Kyle 的意見了，大家可以用力批判 XDD。

主流框架在選擇的靜態型別支持來看，以開發者社群經營的層面來說，
Microsoft Typescript 對開發者社群的互動友善 (比起 Facebook Flow)，
這也是 Vue 3.0 重構時選用的主要原因。

以 Microsoft Typescript 來看靜態型別的自動推斷(Type inference)，
對於使用 OOP 風格的物件是比較難去自動做型別檢查的，
但是天生上，function 就很適合靜態型別檢查。

以 minify 來看， Objects 的 key-value pair 不太可能被壓縮，
反觀 function 壓縮是非常簡單的。

這樣的目的還是希望，可以減少以前過多語法糖，帶給開發人員的認知誤解，
另外前端領域也開始新的想法，主要是對 狀態 管理的機制。
（前端這一兩年風比較小，最近又要開始變化了嗎！？）

順帶一提，如果你主要開發領域非純 JavaScript ，
而是以 Java, C# 之類的語言，業務上沒有需要獨立大型前端團隊，只有少部分會用到前端顯示邏輯，
（上述形容，有人常用全端自稱）
那麼 Angular 2+ 的語法很容易幫助你從原本知識領域，快速上手，
也不會有太多語法糖造成的誤解。

至少我，個人意見 ，過去一年開發 Angular 7 ，使用上十分愉快。

接下來往 pototype 邁進，應該可以順利完賽前講完。