1. 背景

private fields是tc39 stage 3的提案，

class T {
  #x = 0;

  addOne(){
    return ++this.#x;
  }
}

const t = new T;
Reflect.ownKeys(t);  // []

private fields以#號開頭，例如，以上代碼中，#x就是一個private fields，
我們使用Reflect.ownKeys獲取實例t的所有屬性名，結(jié)果是一個空列表。

注：

v = {};

// 可枚舉屬性
v['a'] = 1;

// 不可枚舉屬性
Object.defineProperty(v, 'b', {
  value: 2,
  enumerable: false,
});

// Symbol屬性
s = Symbol('c');
v[s] = 3;

Object.keys(v);  // ['a']
Object.getOwnPropertyNames(v);  // ['a', 'b']
Object.getOwnPropertySymbols(v);  // [Symbol(c)]
Reflect.ownKeys(v);  // ["a", "b", Symbol(c)]

（1）Object.keys會獲取對象自身的可枚舉屬性。
（2）Object.getOwnPropertyNames會獲取對象自身的可枚舉屬性和不可枚舉屬性。
（3）Reflect.ownKeys會獲取對象自身的可枚舉屬性，不可枚舉屬性和Symbol屬性。

2. 用babel進(jìn)行編譯

babel從v7.0.0-beta.48之后，增加了對private fields的支持，
我們來編譯上面的代碼，查看一下編譯結(jié)果。

（1）全局安裝@babel/cli，和@babel/core，并指定版本

$ npm i -g @babel/cli@7.0.0-beta.48 @babel/core@7.0.0-beta.48
$ babel --version
> 7.0.0-beta.48 (@babel/core 7.0.0-beta.48)

（2）新建npm項目，并初始化

$ mkdir test-private-field
$ cd test-private-field
$ npm init

（3）新建.babelrc文件

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-stage-3"
  ]
}

（4）安裝開發(fā)環(huán)境依賴

$ npm i -D \
@babel/core@7.0.0-beta.48 \
@babel/preset-env@7.0.0-beta.48 \
@babel/preset-stage-3@7.0.0-beta.48

（5）源碼index.js

class T {
  #x = 0;

  addOne(){
    return ++this.#x;
  }
}

const t = new T;
Reflect.ownKeys(t);  // []

（6）使用babel編譯，輸出到dist.js中

$ babel index.js > dist.js

（7）編譯結(jié)果如下

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _classPrivateFieldSet(receiver, privateMap, value) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to set private field on non-instance"); } privateMap.set(receiver, value); return value; }

function _classPrivateFieldGet(receiver, privateMap) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return privateMap.get(receiver); }

var T =
/*#__PURE__*/
function () {
  function T() {
    _classCallCheck(this, T);

    _x.set(this, 0);
  }

  _createClass(T, [{
    key: "addOne",
    value: function addOne() {
      return _classPrivateFieldSet(this, _x, +_classPrivateFieldGet(this, _x) + 1);
    }
  }]);

  return T;
}();

var _x = new WeakMap();

var t = new T();
Reflect.ownKeys(t); // []

我們看到private fields是用WeakMap實現(xiàn)的。

3. WeakMap

WeakMap是ECMAScript 2015的特性，它與Map是不同的。
（1）WeakMap的鍵必須是一個對象（object），
（2）并且WeakMap對其自身的鍵是弱引用的（weakly referenced）。

所謂弱引用，指的是作為WeakMap鍵的對象，一旦沒有其他對象引用它，
該鍵值對就會失效，被當(dāng)做垃圾回收。

由于WeakMap的這個特性，我們就可以用它來實現(xiàn)private fields了。

const weakMap = new WeakMap;
class T {
  constructor(){
    weakMap.set(this, {
      x: 0,
    });
  }

  addOne(){
    const fields = weakMap.get(this);
    return ++fields.x;
  }
}

const t = new T;
Reflect.ownKeys(t);  // []

以上代碼中，每次創(chuàng)建一個T的實例，都會向weakMap增加一個鍵值對，
其中，鍵為當(dāng)前創(chuàng)建的T的實例t，值為這個實例所擁有的private fields。

當(dāng)T的實例t不被其他對象引用的時候，該鍵值對會被自動回收，
而如果使用Map的話，則必須手動回收。

參考

MDN: Reflect.ownKeys
MDN: Object.getOwnPropertySymbols
babel: v7.0.0-beta.48
MDN: WeakMap