JS浅拷贝与深拷贝运用

拷贝是指将一个目标数据复制一份，形成两个个体，在前面的开发中，如果将基本数据类型的变量复制给另外一个变量，就可以得到两个相同的变量，改变其中一个变量的值，不会影响另一个变量的值，但是，如果操作的目标是引用数据类型【如：数组，对象】，则会出现两个变量指向同一个对象的情况，如果改变其中一个对象成员，另外一个对象也会发生改变。列如下列代码：

var p1 = { name: 'jack', age: 21 };
var p2 = p1
console.log(p1) // 输出结果：Object { name: 'Tom', age: 21 }
console.log(p2) // 输出结果：Object { name: 'Tom', age: 21 }
console.log(p1 === p2) // 输出结果：true

• 从运行结果来看，在将变量 p1 赋值给变量 p2 后，更改 p2 的成员，p1 的成员也会发生改变。这种情况下在 JavaScript 中称之为浅拷贝。 （列如，将上述代码中的对象 “{ name：‘jack’，age：‘21’ }” 想象成一个文件夹，该文件夹保存了 name 与 age 两个文件，而变量 p1 是链接到这个文件夹的快捷方式。在执行 “var p2 = p1” 操作时，是将快捷方式复制了一份，此时两个快捷方式指向了同一个文件夹，而不是对文件夹进行了复制操作）

• 在实际的开发当中，浅拷贝可以节省内存的开销。因为一个对象可以保存大量的数据，其占用的内存会比基本数据类型高，如果没有浅拷贝机制，再将对象作为函数参数传递时，函数内部的实参就会创建对象的副本，多占用一份内存空间，尤其是进行函数嵌套调用或递归操作时，占用空间会越来越多

与浅拷贝相对的是深拷贝，即真正创建一个对象的副本。若要实现深拷贝的效果，可以编写代码复制对象里的成员到另一个对象。列如下列代码：

<script>
  function deepCopy(obj) {
    var o = {};
    for (var k in obj) {
      o[k] = (typeof obj[k] === 'object') ? deepCopy(obj[k]) : obj[k]
    }
    return o
  }
</script>

• 在上述代码中，第三行创建一个新对象 o 用来保存成员，第 4~6 行遍历了 obj 对象的每一个成员，在遍历时，通过 “o[k] = obj[k]” 实现成员的复制。由于传入的对象 obj 的成员有可能还是一个对象，第五行代码通过 typeof 来进行判断，如果类型是 object【数组，对象的类型都是 object】，则递归调用 deepCopy() 函数，进行完整的复制。
  下列代码是对 deepCopy() 函数进行测试，具体示例如下：

var p1 = {name: 'jack', subject: {name: 'jack', subject: {name: ['HTML', 'CSS']}} };
var p2 = deepCopy(p1);
p2.subject.name[0] = 'JavaScript';
console.log(p1.subject.name[0]); // 输出结果：HTML
console.log(p2.subject.name[0]); // 输出结果：JavaScript
console.log(p1 === p2); // 输出结果：false

从上述可以看出，p1 与 p2 是两个不一样的对象，p2 发生改变之后，并不会影响 p1 的值