lodash cloneDeep 从对象中删除代理

Dee*_*tel 6 javascript ecmascript-6 lodash es6-proxy

当我深度克隆代理对象时,它返回一个没有代理的普通对象。但当我深度克隆对象时我想要代理对象。

前任:

class Abc {
  constructor() {
    this.a = 4;
    return new Proxy(this, {
      get(target, name) {
        return target[name];
      },
    });
  }
}

class Xyz {
  constructor() {
    this.x = new Abc();
    this.y = _.cloneDeep(this.x);
  }
}

var proxyObject = new Xyz().x;
var normalObject = new Xyz().y;
console.log(proxyObject); // Type Proxy
console.log(normalObject); // Type Object
Run Code Online (Sandbox Code Playgroud)

有没有办法克隆像 this.x 这样的原始对象行为的深层对象

Mat*_*ava 3

我不知道这个问题有任何简单(直接)的解决方案。

实现此功能的一种方法是修改Abc构造函数以将原始对象本身(而不是代理)包含在属性中(比方说orig)。

然后您可以定义自己的复制方法。当您在代理对象上调用此方法时,它会获取存储在属性中的非代理对象orig,执行 lodashcloneDeep并返回从此克隆对象创建的新代理对象。

class Abc {
  constructor(orig = this) {
    this.orig = orig;
    this.a = 4;
    this.arr = [1, 2];
    return new Proxy(this, {
      get(target, name) {
        return target[name];
      },
    });
  }

  copy() {
    const cloned = _.cloneDeep(this.orig);
    return new Proxy(cloned, {
      get(target, name) {
        return target[name];
      }
    });
  }
}

class Xyz {
  constructor() {
    this.x = new Abc();
    this.y = this.x.copy();
  }
}

var proxyObject = new Xyz().x;
var normalObject = new Xyz().y;

console.log(proxyObject); 
console.log(normalObject);

proxyObject.arr.push(3);

console.log(proxyObject.arr);
console.log(normalObject.arr);
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>
Run Code Online (Sandbox Code Playgroud)

现在 和proxyObject都是normalObject代理,我们还可以看到代理对象确实被复制了,因为运行后 的proxyObject.arr.push(3)arrnormalObject保持不变。