淺談 class 私有變數

格子熊發表於2018-12-28
變數

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
複製程式碼

該方法最大的優點就是從本質解決了私有變數的問題。

但是有個很大的問題，在這種情況下，引用私有變數的方法不能定義在原型鏈上，只能定義在建構函式中，也就是例項上。這導致了兩個缺點：

  1. 增加了額外的效能開銷
  2. 建構函式包含了方法，較為臃腫，對後續維護造成了一定的麻煩（很多時候，看到程式碼寫成一坨就不想看 -_-）

進階版閉包

進階版閉包方式可以基本完美解決上面的那個問題：既然在建構函式內部定義閉包那麼麻煩，那我放在 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 再走唄~

Github

相關文章