1. 概念

在JavaScript中，拷贝一般是指变量的复制过程。

对于简单类型，拷贝就是直接赋值的过程；

对于复杂类型，浅拷贝是指复制对象的引用地址的过程。如果修改了源对象的某个属性，由于引用相同，所以目标对象的属性也会被改变。

2. 测试

// 测试1  function test() {   var obj = {     id: 1,     name: 'Tom',     props: {       age: 18,     },     color: ['red', 'green'],   };    const res = copy(obj);   obj.props.age = 20; // 修改原对象的属性值，观察目标对象是否受影响   console.log(res.props.age === 20); // true // 表示目标对象受到影响 }  复制代码

3. 实现

function copy(source) {   let res = {};   for (const key in source) {     res[key] = source[key];   }   return res; } 复制代码

二、深拷贝

1. 概念

对于复杂类型，浅拷贝是指完全复制一个全新的对象，修改原对象的属性，不会影响目标对象。因为复制出来的2个对象引用不同，也就是指向内存的地址不同。

2. 测试

function test() {   var obj = {     id: 1,     name: 'Tom',     props: {       age: 18,     },     color: ['red', 'green'],   };    let res = deepCopy(obj);   obj.props.age = 20; // 修改原对象的属性值，观察目标对象是否受影响   console.log(res.props.age === 18); // true // 表示不受影响 } 复制代码

3. 实现

// 第一版 function deepCopy(target, source) {   for (const key in source) {     const item = source[key];     if (Array.isArray(item)) {       target[key] = [];       deepCopy(target[key], item);     } else if (typeof element === 'object') {       target[key] = {};       deepCopy(target[key], item);     } else {       target[key] = item;     }   } }  复制代码

仔细观察发现第一个版本有很多冗余的代码，改造一下：

// 第二版 function deepCopy(target, source) {   for (const key in source) {     const item = source[key];     if (typeof item === 'object') {       deepCopy(Array.isArray(target[key]) ? [] : {}, item);     } else {       target[key] = item;     }   } }  复制代码

三、总结

• 如果一个已知对象，属性都是简单类型，可以通过 JSON.parse(JSON.stringify(source))来实现深拷贝

• 但是如果原对象中有函数、日期、正则等复杂类型的属性，转换后会出现属性丢失问题

• 产生这种问题的根本原因是 JSON不支持这些上述复杂类型，具体解释可以看这里。

// 测试 JSON方式的深拷贝  function test() {   var obj = {     name: 'bird',     speak: function() {       console.log('ji ji ji')     }   }    let res = deepClone(obj);   console.log(res.speak); // undefined // 表示方法属性丢失了 }  function deepClone(source) {   return JSON.parse(JSON.stringify(source)); }