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

class 是創建對象的模版，由一系列屬性和方法構成，用於表示對同一概念的數據和操作。

有的屬性和方法是對外的，但也有的是隻想內部用的，也就是私有的，那怎麼實現私有屬性和方法呢？

不知道大家會怎麼實現，我梳理了下，我大概用過 6 種方式，我們分別來看一下：

_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 的方式）。

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/SusZu6rdVijZ-6seg9oa0Q