通过proxies设置常量

众成翻译 · 掘金 · · 2018-09-04 11:02

正文

在这篇博文中，介绍了一种快速设置常量的奇淫技巧（类似于枚举值，但是并没有封装在命名空间里）。这是一个具有教育意义的难题，而不是你应该在代码中实际使用的东西。

一个简单的版本

TypeScript枚举值

作为参考，考虑下面TypeScript的枚举值（JavaScript自身并没有枚举值）：

enum MyEnum { foo, bar, baz }

assert.equal(MyEnum.foo, 0);
assert.equal(MyEnum.bar, 1);
assert.equal(MyEnum.baz, 2);

我更偏向于使用字符串作为枚举值，因为它们更易于调试：

enum MyEnum { foo='foo', bar='bar', baz='baz' }

assert.equal(MyEnum.foo, 'foo');
assert.equal(MyEnum.bar, 'bar');
assert.equal(MyEnum.baz, 'baz');

纯JavaScript解决方案

你可以使用下面的方式在JavaScript中实现类似的枚举值：

const keyProxy = new Proxy({}, {
  get(_target, propKey, _receiver) {
    return propKey;
  }
});
const {foo, bar, baz} = keyProxy;

assert.equal(foo, 'foo');
assert.equal(bar, 'bar');
assert.equal(baz, 'baz');

上面的代码是如何工作的？我们结合了两个功能点来实现这个效果。

首先，proxy是一个对象，无论你获取它什么键值的属性值，都会得到和键值相同的属性值：

assert.equal(keyProxy.hello, 'hello');
assert.equal(keyProxy.world, 'world');

其次，在解构的时候使用了属性值的简写形式，这样我们就可以同时指定属性键值和变量名。也就是说，下面两种声明方式是等价的。

const {foo, bar, baz} = keyProxy;
const {foo: foo, bar: bar, baz: baz} = keyProxy;

Symbols作为常量值

如果你使用symbols作为常量值，类型就会更加安全。需要修改的只有标记A的那行：

const keyProxy = new Proxy({}, {
  get(_target, propKey, _receiver) {
    return Symbol(propKey); // (A)
  }
});
const {foo, bar, baz} = keyProxy;

assert.equal(typeof foo, 'symbol');
assert.equal(String(foo), 'Symbol(foo)');