理解JS深拷贝

前言：

JS的拷贝(copy)，之所以分为深浅两种形式，是因为JS变量的类型存在premitive（字面量）与reference（引用）两种区别。当然，大多数编程语言都存在这种特性。

众所周知，内存包含的结构中，有堆与栈。在JS里，字面量类型变量存放在栈中，储存的是它的值，而引用类型变量虽然在栈中也占有空间，但储存的只是一个内存地址（通过该地址可以索引找到真实结构所在的内存区域），它的真实结构是存在于堆中的。如下图所示：

结合图示来看，一般来说，浅拷贝只是拷贝了内存栈中的数据，深拷贝，则是要沿着引用类型变量的真实内存地址，去进行一次次的深度遍历，直到拷贝完目标遍历在栈与堆中的所有真实值。

一、浅拷贝的实现

JS实现了一些拥有浅拷贝功能的接口，比如解构赋值的rest模式、Object.assgin。

但浅拷贝的缺陷在于，进行拷贝之后，如果改变了被拷贝目标的某个引用属性的值，则拷贝结果的对应属性的值也会发生改变，反过来亦是如此。

比如将example['爱好'][0]赋予新值 ('听歌')，如下图所示。

从本质上来说，就是因为两者都指向同一个内存区域。那片内存区域一旦发生了变动，自然两者取到的值都发生改变，而且完全一样。

二、深拷贝的实现

深拷贝的原理，前文已经叙述过，但过于抽象，还不够具体。

JS里，可以利用原生的JSON序列化与反序列化接口组合进行实现深拷贝。

如下图所示，深拷贝的结果与被拷贝的目标之间，已经互不影响。

  不过，JSON方式实现的深拷贝，有很多缺陷，首先，是拷贝失真：

1. 值为undefined、函数、Symbol的属性，或者键为Symbol字符串的属性，拷贝后，属性会丢失。

2. 值为NaN的属性，拷贝后，值转为了null。

3. 值为非标准对象Object，比如Set、Map、Error、RegExp等等的属性或数组元素，拷贝后，值转为了空的标准对象，丢失了原来的原型继承关系。

3. 值为undefined、NaN、函数的数组元素，拷贝后，值转为了null。

  其次，是拷贝功能的缺陷：

1. 原型链丢失

2. 无法拷贝有循环引用的对象

综上所述，要实现比较完整功能的深拷贝，就必须得兼顾JSON方式的功能和缺点。

三、手动实现深拷贝

追寻深拷贝的实现方式，可以理解为：深拷贝 = 浅拷贝+深度遍历+特殊情况容错。

以下，我们来实现一个深拷贝函数，deepCopy。假定函数接受的输入为o。

// 深拷贝函数
function deepCopy(o) {

}

深拷贝的基本实现思路，从JS数据类型的角度出发，可以先区分字面量与引用两种类型的变量。

然后，只要判断是字面量，我们就直接浅拷贝返回，否则就进入深度遍历，重复前面的浅拷贝，直到遍历结束。

// 深拷贝函数
function deepCopy(o) {
  // 如果是字面量，直接返回
  if(isPrimitive(o)) return o;
  // 否则，进行深度遍历

  /**
   * 深度遍历代码
   */
}

我们先实现一个判断输入是否为字面量的函数

function isPrimitive(o) {
  if (typeof o !== 'function' && typeof o !== 'object') return true;
  if (o === null) return true;
  return false;
}

然后，进行深度遍历。深度遍历一般有两种选择，一个是递归，一个是while循环。

递归很好理解，但有个缺陷，大量函数栈帧的入栈，很容易导致内存空间不足而爆栈，特别是对于有循环引用关系的输入，可能秒秒钟爆炸。这里，我们采用while循环。

采用while循环的话，我们可以模拟一个栈结构，栈如果为空，则结束循环，若不为空，则进行循环，循环第一步，先出栈，然后处理数据，处理完之后，进入下一次循环判断。

在JS里，模拟栈结构可以用数组，push与pop组合，完美实现后入先出。在数据结构与算法里，这叫深度优先。

// 深拷贝函数
function deepCopy(o) {
  // 如果是字面量，直接返回; 否则，进行深度遍历
  if(isPrimitive(o)) return o;

  // 首先，先定义一个观察者，用来记录遍历的结果。等到遍历结束，这个观察者就是深拷贝的结果。
  const observer = {};

  // 然后，用数组模拟一个栈结构
  const nodeList = [];

  // 其次，为了每次遍历时能地做一些处理，入栈的数据用对象来表示比较合适。
  nodeList.push({
    key: null, // 这里，增加一个key属性，用来关联每次遍历所要处理的数据。
  });

  // 循环遍历
  while(nodeList.length > 0) {
    const node = nodeList.pop(); // 出栈，深度优先

    // 处理节点node

  }
}

接下来，就是处理节点node了。这里要处理的任务，主要有：

1.特殊情况处理，比如Symbol类型的属性虽然无法被Object.keys迭代出来，但可以用Reflect.ownKeys来解决。又比如，针对循环引用，可以在循环外面建立哈希表，每次循环都判断要处理的输入是否已存在哈希表，如果存在，直接引用，否则，存入哈希表。

// 用WeakMap模拟的哈希表，它的弱引用特性可以避免内存泄露
const hashmap = new WeakMap();

// 遍历包括Symbol类型在内的所有属性
const keys = Reflect.ownKeys(node.value);

2.初始化，将输入o挂载到节点里，并存入哈希表。

// 初始化
if (node.key === null) {
  node.value = o;
  node.observer = observer
  // 存入哈希表
  hashmap.set(node.value, node.observer)
}

3.对节点的属性进行遍历，属性值为引用类型，将它压入栈，否则，观察者利用关联的key记录属性值，然后进入下一次循环。

for (let i = 0; i < keys.length; i++) {
  key = keys[i];
  value = node.value[key];
  // 是字面量，直接记录
  if (isPrimitive(value)) {
    node.observer[key] = value;
    continue;
  }
  // 否则，入栈
  nodeList.push({
    key,
    value,
    observer: node.observer
  })
}

4.每次对节点属性进行遍历前，先根据哈希表进行判断

// 查询哈希表，如果不存在对象key，就存入哈希表
if (!hashmap.has(node.value)) {
  hashmap.set(node.value, node.observer[node.key] = isArray(node.value) ? [] : {});
  // 将对象压入栈
  nodeList.push({
    key: node.key,
    value: node.value,
    observer: node.observer[node.key]
  })
  continue;
}
// 存在哈希表里，则从哈希表里取出，赋值
else if (node.observer !== hashmap.get(node.value)) {
  node.observer[node.key] = hashmap.get(node.value)
  continue;
}

这里，补上isArray函数，用来判断是否为数组

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]';
}

到此，深拷贝函数已经成型了。但，还不够完善，因为还没有对输入是函数的情况做处理。

所以，添加两个函数，一个判断是否是函数，一个用例拷贝函数。

// 判断函数
function isFunction(o) {
  return Object.prototype.toString.call(o) === '[object Function]';
}

// 拷贝函数
function copyFunction(fnc) {
  const f = eval(`(${fnc.toString()})`)
  Object.setPrototypeOf(f, Object.getPrototypeOf(fnc))
  Object.keys(fnc).map(key => f[key] = deepCopy(fnc[key]))
  return f;
}

循环遍历之前，加一层对函数的判断

// 是函数，则拷贝函数
  if (isFunction(o)) return copyFunction(o);

遍历的时候，也要加一层对函数的判断

// 函数直接赋值
else if (isFunction(node.value)) {
  node.observer[node.key] = copyFunction(node.value)
  continue;
}

循环结束后，我们还要对原型链进行处理，深拷贝，不能把继承关系给弄丢，这也是输入无论是数组还是对象都能获得正确拷贝结果的一个技巧

// 继承原型
Object.setPrototypeOf(observer, Object.getPrototypeOf(o))

最后，返回观察者对象，即深拷贝结果。

  // 返回深拷贝结果
  return observer;

四、测试结果与结论

 

五、手动实现的深拷贝完整代码

// 判断字面量

function isPrimitive(o) {

  if (typeof o !== 'function' && typeof o !== 'object') return true;

  if (o === null) return true;

  return false;

}

// 判断数组

function isArray(o) {

  return Object.prototype.toString.call(o) === '[object Array]';

}

// 判断函数

function isFunction(o) {

  return Object.prototype.toString.call(o) === '[object Function]';

}

// 拷贝函数

function copyFunction(fnc) {

  const f = eval(`(${fnc.toString()})`)

  Object.setPrototypeOf(f, Object.getPrototypeOf(fnc))

  Object.keys(fnc).map(key => f[key] = deepCopy(fnc[key]))

  return f;

}

// 哈希表

const hashmap = new WeakMap();

// 深拷贝函数

function deepCopy(o) {

  // 如果是字面量，直接返回; 否则，进行深度遍历

  if (isPrimitive(o)) return o;

  // 是函数，则拷贝函数

  if (isFunction(o)) return copyFunction(o);

  // 首先，先定义一个观察者，用来记录遍历的结果。等到遍历结束，这个观察者就是深拷贝的结果。

  const observer = {};

  // 然后，用数组模拟一个栈结构

  const nodeList = [];

  // 其次，为了每次遍历时能地做一些处理，入栈的数据用对象来表示比较合适。

  nodeList.push({

    key: null, // 这里，增加一个key属性，用来关联每次遍历所要处理的数据。

  });

  // 提升变量，尽量少在循环里创建变量

  let node;

  let keys;

  let key;

  let value;

  // 循环遍历

  while (nodeList.length > ) {

    node = nodeList.pop(); // 出栈，深度优先

    // 处理节点node

    // 初始化

    if (node.key === null) {

      node.value = o;

      node.observer = observer

      // 存入哈希表

      hashmap.set(node.value, node.observer)

    }

    // 是函数，则直接记录

    else if (isFunction(node.value)) {

      node.observer[node.key] = copyFunction(node.value)

      continue;

    }

    // 查询哈希表，如果不存在对象key，就存入哈希表

    else if (!hashmap.has(node.value)) {

      hashmap.set(node.value, node.observer[node.key] = isArray(node.value) ? [] : {});

      // 是对象，入栈

      nodeList.push({

        key: node.key,

        value: node.value,

        observer: node.observer[node.key]

      })

      continue;

    }

    // 存在哈希表里，则从哈希表里取出，赋值

    else if (node.observer !== hashmap.get(node.value)) {

      node.observer[node.key] = hashmap.get(node.value)

      continue;

    }

    // 遍历包括Symbol类型的所有属性

    keys = Reflect.ownKeys(node.value);

    for (let i = ; i < keys.length; i++) {

      key = keys[i];

      value = node.value[key];

      // 是字面量，直接存储

      if (isPrimitive(value)) {

        node.observer[key] = value;

        continue;

      }

      // 否则，入栈

      nodeList.push({

        key,

        value,

        observer: node.observer

      })

    }

  }

  // 继承原型

  Object.setPrototypeOf(observer, Object.getPrototypeOf(o))

  // 返回深拷贝结果

  return observer;

}