[JavaScript] private field & weak map

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的所有属性名，结果是一个空列表。

注：

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进行编译

babel从v7.0.0-beta.48之后，增加了对private fields的支持，
我们来编译上面的代码，查看一下编译结果。

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

$ npm i -g @babel/[email protected] @babel/[email protected]
$ 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）安装开发环境依赖

$ npm i -D \
@babel/[email protected] \
@babel/[email protected] \
@babel/[email protected]

（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）编译结果如下

"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实现的。

3. WeakMap

WeakMap是ECMAScript 2015的特性，它与Map是不同的。
（1）WeakMap的键必须是一个对象（object），
（2）并且WeakMap对其自身的键是弱引用的（weakly referenced）。

所谓弱引用，指的是作为WeakMap键的对象，一旦没有其他对象引用它，
该键值对就会失效，被当做垃圾回收。

由于WeakMap的这个特性，我们就可以用它来实现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);  // []

以上代码中，每次创建一个T的实例，都会向weakMap增加一个键值对，
其中，键为当前创建的T的实例t，值为这个实例所拥有的private fields。

当T的实例t不被其他对象引用的时候，该键值对会被自动回收，
而如果使用Map的话，则必须手动回收。

---

参考

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