javascript - 如何为 sessionStorage 编写合适的 ES6 包装器

Question

你好，我想知道如何为 sessionStorage 之类的东西编写合适的包装器。

我可以通过对 sessionStorage 的方法调用来实现我自己的类和代理。例如一些快速的伪代码:

class customStorage {
    set(key, value) {
        sessionStorage.setItem(key, value);
    }
}

我会这样使用它:

const customStorage = new customStorage();
customStorage.set('my-key', 'hello there');

一切都很好，但我希望用户可以自由地在我的代理上使用其他 native sessionStorage 方法，我可能不会在我的代理中实现自己。

对于像 sessionStorage 这样的东西，即使他们可能做的只是在没有任何干预的情况下代理到 sessionStorage，也可以自己编写它们。

对于更大的东西，我只会操作 20 种方法中的 5 种，或者这似乎不可行。

用原型(prototype)覆盖 native 功能似乎也是一个死亡陷阱，导致许多 wtfs-per-minute。

到目前为止，我从 Javascript 中的“代理模式”中了解到，它们都实现了原始对象的所有方法。我是被迫这样做的吗？

有没有什么方法可以创建一个 ES6 类并在构造函数中将该类的原型(prototype)设置为 sessionStorage 之类的？

Answer 1

I would like for a user to have the freedom to use other native sessionStorage methods on my proxy that I might not implement myself in my proxy.

如果用户打算这样做，我宁愿让用户自由地使用 native sessionStorage 直接。您的实现确实有自己的独立功能，它在内部使用 sessionStorage 但不是 sessionStorage。没有理由在您的对象上实现它的接口(interface)。 (另请参见 composition over inheritance)。

Is there some sort of way to create an ES6 class and set the prototype of that very class to sessionStorage in the constructor or something?

没有。即使您想要实现该接口(interface)，您的对象也不是真正的 SessionStorage 实例。同样在这种特殊情况下，sessionStorage 是单例，您无法实例化第二个 SessionStorage，因此继承在这里绝对不起作用。

有三种方法可以解决这个问题(我将为一般情况编写代码，从要包装的任意对象实例化，您可能需要一个类似于静态单例的自定义存储):

• Mixins 来修饰对象。不要创建另一个实例，只需覆盖原始属性即可。 (这对于内置对象来说可能是不可能的)

  function custom(orig) {
      orig.get = function() { … };
      return orig;
  }
  

• 寄生继承，在对象上使用反射创建一个完整的包装器。

  function custom(orig) {
      const obj = {
          get() { … };
      };
      for (const p in orig) { // assuming everything is enumerable - alternatively use
                              // for (const p of Object.getOwnPropertyNames(…))
                              // or even incorporating the prototype chain
          obj[p] = typeof orig[p] == "function"
            ? (...args) => orig[p](...args)
            : orig[p];
      }
      return obj;
  }
  

• 带有 suitable handler 的文字 Proxy :

  const customMethods = {
      get() { … }
  };
  const handler = {
      has(target, name) {
          return name in customMethods || name in target;
      },
      get(target, name) {
          if (name in customMethods) return customMethods[name];
          else return target[name];
          // if its a native object with methods that rely on `this`, you'll need to
          // return target[name].bind(target)
          // for function properties
      }
  }
  
  function custom(orig) {
      return new Proxy(orig, handler);
  }