class 的前世今生 在 es6 之前，雖然 JS 和 Java 同樣都是 OOP （面向對象）語言，但是在 JS 中，只有對象而沒有類的概念。 在 JS 中，生成實例對象的傳統方法是通過構造函數，如下所示： 對比傳統 OOP 語言中的類寫法，這種寫法讓許多學過其他 OOP 語言的 JS 初學者感 ...
class 的前世今生
在 es6 之前，雖然 JS 和 Java 同樣都是 OOP （面向對象）語言，但是在 JS 中，只有對象而沒有類的概念。
在 JS 中，生成實例對象的傳統方法是通過構造函數，如下所示：
function A (x) {
this.x = x
}
// 在原型鏈上掛載原型方法
A.prototype.showX = function () {
return this.x
}
// 生成對象實例
let a = new A(1)
// 調用原型方法
a.showX() // 1對比傳統 OOP 語言中的類寫法，這種寫法讓許多學過其他 OOP 語言的 JS 初學者感到困惑。
為了實現在 JS 中寫 Java 的心愿，當時有人將構造函數寫法封裝成了類似於 Java 中類的寫法的 klass 語法糖 。
有人會問，為什麼是 klass 而不是 class ？當然是因為 class 是 JS 中的保留關鍵字，直接用 class 會報錯。
就這樣湊合著過了好多年，直到 es6 發佈，在 es6 中， klass 終於備胎轉正，搖身一變變成了 class ，終於從官方角度實現了夢想。
之前的代碼轉換成 class 是這樣的：
class A {
// 構造函數，相當於之前的函數A
constructor(x) {
this.x = x
}
// 相當於掛載在原型鏈上的原型方法
showX () {
return this.x
}
}
// 生成對象實例
let a = new A(1)
// 調用原型方法
a.showX() // 1可以發現， class 的寫法更接近傳統 OOP 語言。
class 的不足
看起來， es6 中 class 的出現拉近了 JS 和傳統 OOP 語言的距離。但是，就如之前所說的 klass 一樣，它僅僅是一個語法糖罷了，不能實現傳統 OOP 語言一樣的功能。在其中，比較大的一個痛點就是私有變數問題。
何為私有變數？私有變數就是只能在類內部訪問的變數，外部無法訪問的變數。在開發中，很多變數或方法你不想其他人訪問，可以定義為私有變數，防止被其他人使用。在 Java 中，可以使用 private 實現私有變數，但是可惜的是， JS 中並沒有該功能。
來看下下麵這個代碼：
class A {
constructor(x) {
this.x = x
}
// 想要通過該方法來暴露x
showX () {
return this.x
}
}
let a = new A(1)
// 直接訪問x成功
a.x // 1可以看到，雖然本意是通過方法 showX 來暴露 x 的值，但是可以直接通過 a.x 來直接訪問 x 的值。
很明顯，這影響了代碼的封裝性。要知道，這些屬性都是可以使用 for...in 來遍歷出來的。
所以，實現 class 的私有變數功能是很有必要的。
實現 class 私有變數
雖然， class 本身沒有提供私有變數的功能，但是，我們可以通過通過一些方式來實現類似於私有變數的功能。
約定命名
首先，是目前使用最廣的方式：約定命名，又稱為：自己騙自己或者潛規則。
該方式很簡單，就是團隊自行約定一種代表著私有變數的命名方式，一般是在私有變數的名稱前加上一個下劃線。代碼如下：
class A {
constructor(x) {
// _x 是一個私有變數
this._x = x
}
showX () {
return this._x
}
}
let a = new A(1)
// _x 依然可以被使用
a._x // 1
a.showX() //1可以發現，該方法最大的優點是簡單、方便，所以很多團隊都採用了這種方式。
但是，該方式並沒有從本質上解決問題，如果使用 for...in 依然可以遍歷出所謂的私有變數，可以說是治標不治本。
不過，該方式有一點值得肯定，那就是通過約定規範來方便他人閱讀代碼。
閉包
閉包在很多時候被拿來解決模塊化問題，顯而易見，私有變數本質上也是一種模塊化問題，所以，我們也可以使用閉包來解決私有變數的問題。
我們在構造函數中定義一個局部變數，然後通過方法引用，該變數就成為了真正的私有變數。
class A {
constructor (x) {
let _x = x
this.showX = function () {
return _x
}
}
}
let a = new A(1)
// 無法訪問
a._x // undefined
// 可以訪問
a.showX() // 1該方法最大的優點就是從本質解決了私有變數的問題。
但是有個很大的問題，在這種情況下，引用私有變數的方法不能定義在原型鏈上，只能定義在構造函數中，也就是實例上。這導致了兩個缺點：
- 增加了額外的性能開銷
- 構造函數包含了方法，較為臃腫，對後續維護造成了一定的麻煩（很多時候，看到代碼寫成一坨就不想看 -_-）
進階版閉包
進階版閉包方式可以基本完美解決上面的那個問題：既然在構造函數內部定義閉包那麼麻煩，那我放在 class 外面不就可以了嗎？
我們可以通過 IIFE （立即執行函數表達式） 建立一個閉包，在其中建立一個變數以及 class ，通過 class 引用變數實現私有變數。
代碼如下：
// 利用閉包生成IIFE，返回類A
const A = (function() {
// 定義私有變數_x
let _x
class A {
constructor (x) {
// 初始化私有變數_x
_x = x
}
showX () {
return _x
}
}
return A
})()
let a = new A(1)
// 無法訪問
a._x // undefined
// 可以訪問
a.showX() //1可以發現，該方法完美解決了之前閉包的問題，只不過寫法相對複雜一些，另外，還需要額外創建 IIFE ，有一點額外的性能開銷。
註1：該方式也可以不使用 IIFE ，可以直接將私有變數置於全局，但是這不利於封裝性，所以，我在這裡採用了 IIFE 的方式。
註2：對於 IIFE 是否是個閉包，在 You-Dont-Know-JS 這本書中有過爭議，有興趣的同學可以前去瞭解一下，在此不再贅述。
Symbol
這種方式利用的是 Symbol 的唯一性—— 敵人最大的優勢是知道我方key值，我把key值弄成唯一的，敵人不就無法訪問了嗎？ （人質是這次任務的關鍵，當敵人不再擁有人質時，任務也就完成了）
代碼如下：
// 定義symbol
const _x = Symbol('x')
class A {
constructor (x) {
// 利用symbol聲明私有變數
this[_x] = x
}
showX () {
return this[_x]
}
}
let a = new A(1)
// 自行定義一個相同的Symbol
const x = Symbol('x')
// 無法訪問
a[x] // undefined
// 可以訪問
a.showX() //1從結果來看，完美地實現了 class 私有變數。
個人認為，這是目前最完美的實現私有變數的方式，唯一的缺點就是 Symbol 不太常用，很多同學不熟悉。
私有屬性提案
針對 es6 中的 class 沒有私有屬性的問題，產生了一個提案——在屬性名之前加上 # ，用於表示私有屬性。
class A {
#x = 0
constructor (x) {
#x = x
}
showX () {
return this.#x
}
}很多同學會有一個問題，私有屬性提案為什麼不使用 private 而使用 # ？是人性的扭曲還是道德的淪喪？ 這一點和編譯器性能有關（其實我個人認為還有一大原因是向 Python 靠攏，畢竟從 es6 以來， JS 一直向著 Python 發展），有興趣的同學可以去瞭解瞭解。
不過該提案僅僅還是提案罷了，並沒有進入標準，所以依然無法使用。
最後
如果上述所有方法全都滿足不了你，還有一個終極方法—— TypeScript 。使用 TS ，讓你享受在 JS 中寫 Java 的快感！區區私有變數，不在話下。
就今年的發展趨勢來看， TS 已經成為前端必備的技能之一，連之前 diss 過 TS 的尤大都已經開始用 TS 重寫 Vue 了（尤大：真香）。
最後的最後
又到了日常的求 star 環節，如果大家覺得這篇文章還不錯的話，不如給我點個 star 再走唄~
