一文詳解JS私有屬性的6種實現方式

2022-03-30 16:00:27

_prop

區分私有和公有最簡單的方式就是加個下劃線 _，從命名上來區分。

比如：

class Dong {
    constructor() {
        this._name = 'dong';
        this._age = 20;
        this.friend = 'guang';
    }

    hello() {
        return 'I'm ' + this._name + ', '  + this._age + ' years old';
    }
}

const dong = new Dong();

console.log(dong.hello());

這裡的 Dong 就有私有屬性 _name、_age，公有屬性 friend。

但是這種方式只是一種命名規範，告訴開發者這個屬性、方法是私有的，不要呼叫，但終究不是強制的，如果別人要用也阻止不了。

不過這種方式用的還是挺多的，歷史比較悠久。

那怎麼能基於這種規範實現真正的私有呢？這就要用到 Proxy 了：

Proxy

Proxy 可以定義目標物件的 get、set、Object.keys 的邏輯，可以在這一層做一下判斷，如果是下劃線 _ 開頭就不讓存取，否則就可以存取。

比如還是這個 class:

class Dong {
    constructor() {
        this._name = 'dong';
        this._age = 20;
        this.friend = 'guang';
    }

    hello() {
        return 'I'm ' + this._name + ', '  + this._age + ' years old';
    }
}

const dong = new Dong();

我們不直接呼叫它的物件的屬性方法了，而是先用一層 Proxy 來約束下 get、set、getKeys 的行為：

const dong = new Dong();
 
const handler = {
    get(target, prop) {
        if (prop.startsWith('_')) {
            return;
        }
        return target[prop];
   },
   set(target, prop, value) {
    if (prop.startsWith('_')) {
        return;
     }
     target[prop] = value;
   },
   ownKeys(target, prop) {
      return Object.keys(target).filter(key => !key.startsWith('_'))
   },
 }
 
const proxy = new Proxy(dong, handler)

我們通過 new Proxy 來給 dong 定義了 get、set、ownKeys 的 handler：

get: 如果以下劃線 _ 開頭就返回空，否則返回目標物件的屬性值 target[prop]
set: 如果以下劃線 _ 開頭就直接返回，否則設定目標物件的屬性值
ownKeys: 存取 keys 時，過濾掉目標物件中下劃線開頭的屬性再返回

這樣就實現了下劃線開頭的屬性的私有化：

我們測試下：

const proxy = new Proxy(dong, handler)

for (const key of Object.keys(proxy)) {
    console.log(key, proxy[key])
}

確實，這裡只列印了公有屬性的方法，而下劃線開頭的那兩個屬性沒有列印。

我們基於 _prop 這種命名規範實現了真正的私有屬性！

再呼叫下方法試試：

咋是 undefined 了？

因為 proxy.hello 方法的 this 也是指向 proxy 的，也會受限制，所以要再做下處理：

如果用的是方法，那就給它繫結 this 為目標物件。

這樣 hello 方法就可以存取到那些 _ 開頭的私有屬性了：

我們通過 Proxy 給下劃線的命名規範實現了真正的私有屬性，但是要定義一層 Proxy 比較麻煩，有沒有不定義 Prxoy 的方式呢？

確實有，比如 Symbol：

Symbol

Symbol 是 es2015 新增的一個 api，用於建立唯一的值。基於這個唯一的特性，我們就可以實現私有屬性。

比如這樣：

const nameSymbol = Symbol('name');
const ageSymbol = Symbol('age');

class Dong {
    constructor() {
        this[nameSymbol] = 'dong';
        this[ageSymbol] = 20;
    }

    hello() {
        return 'I'm ' + this[nameSymbol] + ', '  + this[ageSymbol] + ' years old';
    }
}

const dong = new Dong();

我們不再用 name 和 age 作為私有屬性名了，而是用 Symbol 生成唯一的值來作為名字。

這樣外面因為拿不到屬性名，就沒法取到對應的屬性值：

這種方式比 Proxy 的方式更簡單一些，也是用的很多的一種實現私有屬性的方式。

如果想暴露出去，可以定義個 get 方法：

但是這種私有屬性是真的沒法存取麼？

不是的，有一個 api 叫做 Object.getOwnPropertySymbols，可以取到物件的所有 Symbols 屬性，然後就可以拿到屬性值了：

所以說這種方式只是 Object.keys 取不到對應的屬性而已，不如 Proxy 那種方式完善。

那不用 Proxy 的方式，還比有沒有 Symbol 更完善的呢？

那可以試試這種：

WeakMap

外面可以存取到屬性和方法是因為我們把它掛到了 this 上，那不掛到 this 上外面不就存取不到了麼？

比如用一個 Map 儲存私有屬性：

const privateFields = new Map();

class Dong {
    constructor() {
        privateFields.set('name', 'dong');
        privateFields.set('age', 20);
    }

    hello() {
        return 'I'm ' + privateFields.get('name') + ', '  + privateFields.get('name') + ' years old';
    }
}

我們測試下：

這樣貌似可以，但不知道大家有沒有發現其中的問題：

所有物件都用同一個 Map，之間相互影響
物件銷燬了這個 Map 依然存在

怎麼解決這個問題呢？

不知道大家用沒用過 WeakMap，它的特性是隻能用物件作為 key，物件銷燬，這個鍵值對就銷燬。

完美解決了上面兩個問題：

因為是用物件作為 key 的，那不同的物件是放在不同的鍵值對上的，相互沒影響
物件銷燬的時候，對應的鍵值對就銷燬，不需要手動管理

貌似是很完美，我們實現下：

const dongName = new WeakMap();
const dongAge = new WeakMap();

const classPrivateFieldSet = function(receiver, state, value) {
    state.set(receiver, value);
}

const classPrivateFieldGet = function(receiver, state) {
    return state.get(receiver);
}


class Dong {
    constructor() {
        dongName.set(this, void 0);
        dongAge.set(this, void 0);

        classPrivateFieldSet(this, dongName, 'dong');
        classPrivateFieldSet(this, dongAge, 20);
    }

    hello() {
        return 'I'm ' + classPrivateFieldGet(this, dongName) + ', '  + classPrivateFieldGet(this, dongAge) + ' years old';
    }
}

每個屬性定義了一個 WeakMap 來維護，key 為當前物件，值為屬性值，get 和 set 使用 classPrivateFieldSet 和 classPrivateFieldGet 這兩個方法，最終是通過從 WeakMap 中存取的。

在構造器裡初始化下當前物件對應的屬性值，也就是 dongName.set(this, void 0)，這裡的 void 0 的返回值是 undefined，一個意思。

測試下：

哇，通過 WeakMap 也能實現私有屬性！

不過這裡的 classPrivateFieldGet 沒必要定義吧，直接 xxMap.get 不就行麼？

確實，包一層的目的是為了可以加一些額外的邏輯，這裡也可以直接從 weakMap 取。

但這樣寫起來也很麻煩呀，有沒有更簡單的方式呢？

能不能設計一種語法糖，它自動編譯成這種方式呢？

想的沒錯，確實有這種語法糖：

#prop

現在有一個私有屬性的 es 草案，可以通過 # 的方式來標識私有屬性和方法。

比如這樣：

class Dong {
    constructor() {
        this.#name = 'dong';
        this.#age = 20;
        this.friend = 'guang';
    }
    hello() {
        return 'I'm ' + this.#name + this.#age + 'years old';
    }
}

這裡的 name 和 age 都是私有的，而 friend 是公有的。

這種新語法 JS 引擎沒那麼快支援，但是可以通過 babel 或者 ts 編譯器來編譯成低版本語法的方式來提前用。

比如 babel 有 @babel/proposal-private-property-in-object 的外掛，它可以實現這種語法的編譯：

babel 就是把 #prop 編譯成上面那種 WeakMap 的方式來實現的。

這個外掛在 @babel/preset-env 的預設裡，會自動引入：

除了 babel，ts 裡也可以直接用這種語法：

也是會編譯成 WeakMap 的方式來實現。

其實 ts 實現的新語法還是不少的，比如 ? 和 ?? 分別是可選鏈和預設值的語法，下面這兩種寫法等價：

const res = data?.name ?? 'dong';
const res2 = data && data.name  || 'dong';

這種新語法都是直接可用的，babel 的話需要引入下 proposal 外掛。

對了，我記得 ts 裡 class 也是有 private 的修飾符的，那個不也是私有屬性麼？

其實它是私有屬性但也不完全是，我們來看一下：

ts private

ts 可以通過 private 來修飾屬性、方法的可見性：

private 表示屬性私有，只有 class 內部可存取
protected 表示保護，只有 class 和子 class 可存取
public 表示公有，外部也可存取

型別檢查和提示的時候是有區別的，比如 private 屬性在 class 外部不可存取：

而 class 內部是可以存取的：

但是這種約束只是用於型別檢查的，只存在編譯期間，執行時並沒有這種約束。

我們可以看下編譯後的程式碼：

可以看到沒有做任何處理。

而如果用 #prop 的方式，除了編譯時是 private 的，執行時也是：

所以，要實現真正的 private 的話，還是用 #prop 的方式，如果只是編譯時約束那宣告下 private 就行。

總結

class 用於定義圍繞某個概念的一系列屬性和方法，這些屬性和方法有的是內部用的，有的是對外的。只有內部用的屬性、方法需要實現私有化。

實現私有屬性方法，我樹立了 6 種方式：

通過下劃線 _prop 從命名上區分
通過 Proxy 來定義 get、set、ownKeys 的邏輯
通過 Symbol 來定義唯一的屬性名，不能通過 keys 拿到
通過 WeakMap 來儲存所有物件的私有屬性和方法
通過 #prop 的 es 新語法實現私有，babel 和 tsc 會把它們編譯成 WeakMap 的方式
通過 ts 的 private 在編譯時約束

這六種方式，有三種只是偽私有，比如 _prop（依然可以存取）、ts 的 private（執行時可存取）、Symbol（可以通過 Object.getOwnSymbols 拿到 symbol 來存取）。

另外三種是真正的私有，包括 Proxy、WeakMap、#prop（目前是編譯為 WeakMap 的方式）。

有的是從屬性名上想辦法，比如 _prop 和 Symbol，有的是從 this 上想辦法，比如 Proxy（包一層）和 WeakMap（不掛到 this），有的是從語言本身想辦法，比如 ts 的 private 或者 es 新語法的 #prop。

這 6 種實現私有屬性的方式，你用過幾種？

以上就是一文詳解JS私有屬性的6種實現方式的詳細內容，更多關於JS私有屬性的資料請關注it145.com其它相關文章！