如何将ES6代理变回普通对象（PO​​JO）？

Question

我正在使用一个将内容转换为ES6代理对象的库，而另一个我认为令人窒息的库是因为我将其中的一个传递给了我（我的代码是荒唐的，我知道），但我不知道如何取消代理对象。

但是我只是傻瓜。代理可以做任何事情！（在下面回答我的问题...）

Answer 1

使用Spread 运算符怎么样？

 const plainObject = { ...proxyObject };

Answer 2

尝试使用JSON.parse(JSON.stringify(proxyObj))但删除了任何无法字符串化的内容（如类、函数、回调等），这对我的用例不利，因为我的对象中有一些回调函数声明，我想将它们视为一部分我的对象。但是我发现使用Lodash cloneDeep函数在将 Proxy 对象转换为 POJO 同时保持对象结构方面做得非常好。

convertProxyObjectToPojo(proxyObj) {
  return _.cloneDeep(proxyObj);
}

Answer 3

我发现了一个骇客。就我而言，我无法控制代理（mobx可观察值）的创建。因此解决方案是：

JSON.parse(JSON.stringify(your.object))

Answer 4

pp = new Proxy(
   {a:1},
   {
      get: function(target, prop, receiver) { 
             if(prop==='target') return target 
           }
   }
)

但这只有在您可以控制代理的创建时才有效。但事实证明更容易：

pojo = Object.assign({}, proxyObj) // won't unwrap nested proxies though

对于可能喜欢这个答案的读者来说，大卫·吉尔伯特森的新答案可能会更好。我个人更喜欢lodash clonedeep。最流行的似乎是 JSON.parse(JSON.stringify(...))

Answer 5

如果不想使用 lodash object.assign({},val) 方法就可以了。但如果 val 包含嵌套对象，它们将被代理。所以必须像这样递归地完成：

function unproxify(val) {
    if (val instanceof Array) return val.map(unproxify)
    if (val instanceof Object) return Object.fromEntries(Object.entries(Object.assign({},val)).map(([k,v])=>[k,unproxify(v)]))
    return val
}

实际上它是一个深度克隆功能。我认为如果 val 包含 Map 对象，它不起作用，但您可以按照相同的逻辑修改该函数。

如果你想取消 Vue3 代理，Vue3 提供了一个函数：toRaw