如何为动态属性编写装饰器？

Question

我写了一个answer，我必须在其中写一些装饰器，这样我才能挂钩一些函数调用。但是，我也想挂接到属性设置器调用中，但我不确定如何做到这一点。

在答案中，我想联系localStorage，这样我就可以听到任何变化。我通过装饰setItem() 和removeItem() 函数来做到这一点。

我知道我可以通过创建在某些时候调用原始函数的新函数来装饰函数。

var _setItem = localStorage.setItem;
localStorage.setItem = function () {
    _setItem.apply(this, arguments);
    localStorageObserver.notifySubscribers(arguments[0]);
};

这很好用，但我还想加入其他用途，即属性访问。以下是存储对象的所有等效项：

localStorage.setItem('someProperty', 'value');
localStorage.someProperty = 'value';
localStorage['someProperty'] = 'value';

所以我需要了解最后两种情况，但我不确定如何实现。

如何为动态属性编写装饰器？有可能吗？

我想我可以手动创建属性，因为它们被设置为隐藏存储对象所做的事情，但这似乎不太可扩展。如果有一个简单的setProperty(name, value) 函数可以挂接，我可以装饰它。但据我所知，这并不存在。

Answer 1

如何为动态属性编写装饰器？有可能吗？

从 ES5 开始，使用真正的 JavaScript 对象，您可以通过 Object.defineProperty 将属性替换为 getter/setter 对来装饰可以找到名称的属性，但不能装饰您不知道名称的属性.在 ES6 中，可以创建“代理”，它允许您将外观完全放在现有对象的前面，即使在您还不知道名称的 proeprties 上也可以拦截 get/set，前提是您允许替换具有立面的对象。

在 ES5 的情况下，有问题的对象必须是真正的 JavaScript 对象，并且不能保证主机提供的对象，如 localStorage。在 ES6 的情况下，你必须能够用你自己的外观对象覆盖 localStorage，但是由于 localStorage 是主机提供的，所以不能保证你可以并且有充分的理由相信你不会被允许（并且已经在 Chrome 上尝试过，但您无法在 Chrome 上使用）。