淺談class私有變數
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.show() //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)
// 無法訪問
a._x // undefined
// 可以訪問
a.show() //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 再走唄~