淺談class私有變數

舞動乾坤發表於2018-12-28

轉自淺談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
    }
<span class="hljs-comment">// 相當於掛載在原型鏈上的原型方法</span>
showX () {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.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
    }
<span class="hljs-comment">// 想要通過該方法來暴露x</span>
showX () {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.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 () {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>._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
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">A</span> </span>{
    <span class="hljs-keyword">constructor</span> (x) {
        <span class="hljs-comment">// 初始化私有變數_x</span>
        _x = x
    }

    showX () {
        <span class="hljs-keyword">return</span> _x
    }
}

<span class="hljs-keyword">return</span> 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 再走唄~

Github

相關文章