js object深拷贝

javascript的传参都是引用传递。下面的代码

function mutate(obj) {
  obj.a = true;
}

const obj = {a: false};
mutate(obj)
console.log(obj.a);

答案:1: prints true 2: prints false

正确答案是1.因为这里正是通过引用来传参的。

那么下面这样是否可以呢？答案已经已经可以看到了，这里的Object.assign是一种浅拷贝，对于obj里面还有嵌套的对象时，一样存在引用传递的问题

const obj = /* ... */;
const copy = Object.assign({}, obj);

function mutateDeepObject(obj) {
  obj.a.thing = true;
}

const obj = {a: {thing: false}};
const copy = Object.assign({}, obj);
mutateDeepObject(copy)
console.log(obj.a.thing); // prints true

还有object.spread同样是创建一个浅拷贝

当然，有时你可能想要完全拷贝一个对象，作为参数去传递，从而不影响原有的对象。下面是介绍几种深拷贝的例子

1，json.parse

const obj = /* ... */;
const copy = JSON.parse(JSON.stringify(obj));

怎么样，可能你曾用过，这里就是深拷贝的引用。

但是对Maps, Sets, RegExps, Dates, ArrayBuffers等不适用。

2. MessageChannel

function structuralClone(obj) {
  return new Promise(resolve => {
    const {port1, port2} = new MessageChannel();
    port2.onmessage = ev => resolve(ev.data);
    port1.postMessage(obj);
  });
}

const obj = /* ... */;
const clone = await structuralClone(obj);

这里的消息对象 obj接收方就是一个深拷贝对象.这里是一种异步深拷贝。下面的state则是同步深拷贝的应用

3.History API

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}

const obj = /* ... */;
const clone = structuralClone(obj);

这里的 state每次都是一次深拷贝.(safari限制30ms内最多调用100次)

4.Notification API

function structuralClone(obj) {
  return new Notification('', {data: obj, silent: true}).data;
}

const obj = /* ... */;
const clone = structuralClone(obj);

这种方式受浏览器权限限制，会比较慢。由于某些原因safari会返回 undefined

总结：实际中使用时，可以优先使用
1,JSON.parse(JSON.stringify())性能最佳且各支持种浏览器
2.MessageChanne 支持各种浏览器