ES6類別與原型

一般而言，JavaScript是基於原型的物件導向典範，然而，對於許多開發者來說，原型鏈的繼承方式不易理解且難以掌握，因而有了各式各樣模擬類別的方式，以便將原型繼承的彈性約束到一定程度。

而為了有個共同遵守的風格，ECMAScript 6規範了類別語法，但ES6並沒有因此而成為基於類別的語言，骨子裡依舊是基於原型！

函式與類別的差異

在ES6，若使用class Person {}定義了類別，其中定義了constructor與toString方法，很容易對應傳統基於function定義建構式的方式，class語法在許多方面來看，是function建構式的語法蜜糖，不過，實際上還是有許多不同。

首先，Person雖然是Function的實例，然而不會是全域上的特性。Person沒有Hoist的效果，在Person定義之前，沒辦法結合new來建構實例，Person就像是使用let宣告的變數，而Person雖然是Function的實例，卻不能當普通函式來呼叫，否則會引發TypeError。

在class中定義的方法，包含get、set方法，確實會是類別原型物件上的特性。例如，在Person.prototype上，確實是有toString方法，而在定義Person類別後，於Person.prototype直接添加特性，同時，Person建構的實例，也能取用對應的特性。

不過，類別中定義的方法，無法列舉——無論使用for in、Object.hasOwnProperty、Object.keys都無法列舉，在toString的特性描述器（Property descriptor）中，enumerable特性會是false。

唯一能從Person.prototype取得類別上定義特性的方式，是透過Object.getOwnPropertyNames，因為它會傳回可列舉和不可列舉之特性名稱，但是，這對於Symbol特性不管用，因為無論特性描述器的enumerable特性是否為false，本來就都無法透過for in、Object.hasOwnProperty、Object.keys列舉Symbol，無論enumerable特性是否為false（類別中定義Symbol特性方法時的情況），取得Symbol特性的方式，都是透過Object.getOwnPropertySymbols。

不同場合中的super

要說為何基於原型的JavaScript中，始終有開發者追求基於類別的模擬，原因之一，大概就是在實現繼承時，基於原型的方式對開發者來說，有許多難以掌握，或者實作上複雜、難以閱讀的地方。而ES6在繼承這方面，使用extends來實現繼承，不用追查原型鏈，就語法實作上著實簡化許多。

然而，在開始使用ES6的繼承之後，若必須於子類別定義建構式，第一個遇到的就是須呼叫super()的問題，它代表著呼叫父建構式，而確實也解決了過去自行模擬繼承時，必須得呼叫父建構式的難點。

只不過，建構式中一定得明確呼叫super()，而且在呼叫super()之前，不能取用this。而有些基於類別的語言，確實要求一定得呼叫super()，例如Java，這主要是要求父類建構初始化必須先完成，才能進行子類建構初始流程，Java的super()甚至必須是第一行，否則會編譯錯誤。

不過，ES6中的super()主要是為了創造this參考的物件（更具體地說，就是最頂層父類建構式return的物件），然後再從父類至子類逐層執行初始流程，這點跟基於原型時實作繼承的方式就有差異了——基於原型實作繼承時，會先在子建構式中創造出this參考的物件，然後再呼叫父初始流程。

在建構式或方法中，都可以使用super關鍵字，如果super後接上了特性是為了取值，這時super代表的是父類的prototype，因此，通常會是子類重新定義了同名方法之後，用來呼叫父類的同名方法時使用。換言之，如果在父類的prototype上，定義了x特性為10，那麼super.x取得的也會是10。

不過，若是透過super.x設定為100，父類prototype.x並不會被修改，而是在父類建構式傳回的物件上設定x特性為100，然而在子類中，父類建構式傳回的物件，就會是this參考的物件，也就是說super.x = 100相當於this.x = 100，此時super等同於this！

在ES6的類別中，可以定義static方法，而在有父子繼承關係的類別時，子類static方法中若出現super，此時的super代表著父類別，因而這時的應用，就是透過super來呼叫父類的同名static方法。

extends Object？null？

既然談到super()與super關鍵字，來問幾個問題。

class A {}中若定義了建構式，可以使用super()嗎？如果當中定義了static方法，使用super.name的話會得到什麼值呢？在JavaScript中，所有的物件都會是Object的實例，那麼，class A {}會等同於class A extends Object {}嗎？

class A {}時若定義了建構式，不能使用super()，這會是語法錯誤；在static方法中，super.name會是空字串，表示沒有任何父類別；class A {}不同於class A extends Object {}，因為後者的父類別是Object，而前者就單純只是個基礎類別，沒有父類別，就像是個普通函式，如同沒有ES6的class語法之前，利用function來定義建構式那樣，而A.__proto__會是Function.prototype。

實際上，只要是new可以使用的對象，就是extends可以使用的的對象，而類別的__proto__會被設定為extends的對象，因此，在ES6的類別語法中，可透過類別的__proto__瞭解類別繼承關係，如果一路向上，最後一定會是Function.prototype。就算是class A extends Object {}，A.__proto__會是Object，而Object.__proto__是Function.prototype，因為原生的Object本來就是個普通函式。

照這來看，ES6的類別語言本身，並沒有定義一個頂層的基礎類別，任何沒有extends的class定義，都會是個基礎類別，而這些基礎類別基本上，就是個普通函式（除了不能直接呼叫外），畢竟，JavaScript本質上就是個基於原型的語言，類別語法只是個模擬罷了。

但extends有個特例，也就是extends null。就語義上來說，extends null是真正沒有繼承任何類別（或者說也不是個類別了），預設無法使用new來建構，這是因為無法super()（null不是個類別，也不是個函式），也就無法產生this，真的想要能夠new的話，必須明確定義constructor()，並在最後return一個與與目前類別無關的物件。

在extends null下，原型鏈最後會中斷，類別的prototype.__proto__會是undefined。在既有的JavaScript中，null本來就什麼也不能做，只是一個extends null的類別可以做什麼呢？我想，此時所得到的，是定義一個Null extends null {}，用來真正代表Null型態吧！然而對於動態定型的JavaScript來說，這樣的意義並不大，只能說是特別為null做出的邊角案例（corner case）考量。

模擬終究是模擬

就算在ECMAScript 6中，提供了類別語法，不過JavaScript終究是基於原型的語言，類別語法只是模擬，目的在於提供一致的風格基礎。如果打算用類別語言來約束原型的彈性，可以用ES6類別來解決需求的情況下，建議直接採用，以減少類別風格不一致而帶來的溝通與轉換問題。

使用類別語法時，應避免混用原型操作，這只會造成更大的困擾。當然，若需要的類別特性，無法使用ES6類別語法來實現，基於原型的方式仍然適用，這時瞭解類別與原型間的關係，可能是無法避免的，或者更進一步地，開發者經常得處理原型的問題，那麼就別使用類別語法了，因為，此時需要的，並不是類別的約束，而是原型的彈性了！