Javascript 中的对象拷贝

原文：COPYING OBJECTS IN JAVASCRIPT
在这篇文章中我们将会讨论 Javascript 中对象拷贝的多种方式。包括深拷贝和浅拷贝。
开始之前，先谈一些基础知识： Javascript 中的对象只是对内存中某个地址的引用。这些引用是可变的，即它们可以重新分配。因此，简单制作一个引用的副本只会导致2个引用指向内存中相同的地址：

var foo = {
    a : "abc"
}
console.log(foo.a); // abc

var bar = foo;
console.log(bar.a); // abc

foo.a = "yo foo";
console.log(foo.a); // yo foo
console.log(bar.a); // yo foo

bar.a = "whatup bar?";
console.log(foo.a); // whatup bar?
console.log(bar.a); // whatup bar?  

在上面的例子中可以看到，不管是foo还是bar都反映了它们对象上的变化。因此，根据你的用法需要特别注意Javascript的对象拷贝。

浅拷贝

如果你的对象只有值类型的属性，则可以用拓展语法或者

Object.assign(...)

var obj = { foo: "foo", bar: "bar" };

var copy = { ...obj }; // Object { foo: "foo", bar: "bar" }

var obj = { foo: "foo", bar: "bar" };

var copy = Object.assign({}, obj); // Object { foo: "foo", bar: "bar" }

注意，上述两种方法都可以将属性值从多个源对象复制到目标对象：

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };

var copySpread = { ...obj1, ...obj2 }; // Object { foo: "foo", bar: "bar" }
var copyAssign = Object.assign({}, obj1, obj2); // Object { foo: "foo", bar: "bar" }

上述方法的问题在于对于对象的属性是对象的对象，只复制了引用地址，即它相当于执行 var bar = foo，与第一个代码示例一样：

var foo = { a: 0 , b: { c: 0 } };
var copy = { ...foo };

copy.a = 1;
copy.b.c = 2;

console.dir(foo); // { a: 0, b: { c: 2 } }
console.dir(copy); // { a: 1, b: { c: 2 } }

深拷贝（警告）

对于更加复杂的情况，可以使用较新的被称为“结构化拷贝”的HTML5拷贝算法。不幸的是，它仍局限于某些内置类型，但它支持的类型比 JSON.parse 多得多：Date, RegExp, Map, Set, Blob, FileList, ImageData, 稀疏和类型化的Array。它还保留了拷贝数据中的引用，允许它支持不能与上述序列化方法一起使用的循环和递归结构。
目前没有直接的方法来调用结构化拷贝算法，但是有一些较新的浏览器功能在引擎帮助下使用了这个算法。因此有几个可以用来深拷贝的解决方法。
通过 MessageChannels：它的想法是利用通信功能使用的序列化算法。由于这个功能是基于事件的，因此生成的拷贝也是异步操作。

class StructuredCloner {
  constructor() {
    this.pendingClones_ = new Map();
    this.nextKey_ = 0;

    const channel = new MessageChannel();
    this.inPort_ = channel.port1;
    this.outPort_ = channel.port2;

    this.outPort_.onmessage = ({data: {key, value}}) => {
      const resolve = this.pendingClones_.get(key);
      resolve(value);
      this.pendingClones_.delete(key);
    };
    this.outPort_.start();
  }

  cloneAsync(value) {
    return new Promise(resolve => {
      const key = this.nextKey_++;
      this.pendingClones_.set(key, resolve);
      this.inPort_.postMessage({key, value});
    });
  }
}

const structuredCloneAsync = window.structuredCloneAsync =
    StructuredCloner.prototype.cloneAsync.bind(new StructuredCloner);


const main = async () => {
  const original = { date: new Date(), number: Math.random() };
  original.self = original;

  const clone = await structuredCloneAsync(original);

  // different objects:
  console.assert(original !== clone);
  console.assert(original.date !== clone.date);

  // cyclical:
  console.assert(original.self === original);
  console.assert(clone.self === clone);

  // equivalent values:
  console.assert(original.number === clone.number);
  console.assert(Number(original.date) === Number(clone.date));

  console.log("Assertions complete.");
};

main();

通过 history API： history.pushState() 和 history.replaceState() 都创建了它们第一个参数的结构化拷贝！注意当这个方法是异步的时候，操纵浏览器历史记录不再是一个快速操作，反复调用此方法可能会导致浏览器无响应。

const structuredClone = obj => {
  const oldState = history.state;
  history.replaceState(obj, null);
  const clonedObj = history.state;
  history.replaceState(oldState, null);
  return clonedObj;
};

通过 notification API：在创建新通知时，构造函数会创建它关联数据的结构化拷贝。注意它还会尝试向用户显示浏览器通知，但是除非应用程序已经请求到了显示通知的权限，否则这个操作将会失败。在拥有权限的情况下，通知立即关闭。

const structuredClone = obj => {
  const n = new Notification("", {data: obj, silent: true});
  n.onshow = n.close.bind(n);
  return n.data;
};

在 NODE.JS 中深拷贝

不幸的是，结构化拷贝算法目前仅适用于基于浏览器的应用。对于服务端，可以使用 lodash 的 cloneDeep 方法，该方法也是基于结构化拷贝方法。

结论

总而言之，在Javascript中拷贝对象的最佳算法很大程度上取决于你要复制的对象的内容和类型。虽然 lodash 是最安全的通用深拷贝方法，但如果你自己动手，可能会获得更高效的实现，以下是一个适用于日期的简单深拷贝的例子：

function deepClone(obj) {
  var copy;

  // Handle the 3 simple types, and null or undefined
  if (null == obj || "object" != typeof obj) return obj;

  // Handle Date
  if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Handle Array
  if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
        copy[i] = deepClone(obj[i]);
    }
    return copy;
  }

  // Handle Function
  if (obj instanceof Function) {
    copy = function() {
      return obj.apply(this, arguments);
    }
    return copy;
  }

  // Handle Object
  if (obj instanceof Object) {
      copy = {};
      for (var attr in obj) {
          if (obj.hasOwnProperty(attr)) copy[attr] = deepClone(obj[attr]);
      }
      return copy;
  }

  throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}

就个人而言，我期待能够在任何地方使用结构化拷贝，最后把这个问题放一边，快乐的拷贝:)
注：若有问题，请联系我修改=。=