说实话，搞前端开发的兄弟们，谁没遇到过那种“改了一个变量，结果另一个变量也跟着变了”的崩溃时刻？那种感觉就像是你在自己家里修了个灯泡，结果邻居家也跟着亮了简直让人怀疑人生。这背后其实就是JavaScript中那个老生常谈，却又总是让人掉坑里的话题——浅拷贝与深拷贝。

记得我有次去面试，本来聊得挺开心，面试官突然话锋一转，笑眯眯地问我：“你说说kan，Object.assign 到底是深拷贝还是浅拷贝？”我当时心里一紧，虽然平时用过但真要深究原理，还是得好好捋一捋。今天咱们就来把这层窗户纸捅破，彻底搞清楚这两个概念到底是个什么鬼，顺便把那些面试中可Neng遇到的“坑”dou填平。

在聊拷贝之前，咱们得先明白Zui基础的“赋值”。在JavaScript里数据类型分为两大类：基本数据类型和引用数据类型。

当你把一个对象赋值给另一个变量时比如：

let obj1 = { a: 10 };
let obj2 = obj1; // 这一步仅仅是把引用地址给了过去
obj2.a = 20;
console.log; // 20 

kan到没？这根本就不是拷贝，这就像是给了别人一把你家的钥匙。别人拿着钥匙进屋把沙发搬走了你回家一kan，沙发也没了。这里的 obj2 和 obj1 指向的dou是内存中同一个地址。所以这既不是浅拷贝，也不是深拷贝，这就是单纯的“引用传递”。hen多时候，我们想要的结果是 arr 的值保持不变，而不是这种“连体婴”式的操作。

那么什么是浅拷贝呢？简单来说浅拷贝创建了一个新对象，但是这个新对象的属性值，Ru果是基本类型，那就没问题；但Ru果属性值又是个对象，那它拷贝的依然是那个引用地址。

这就好比是复印了一份文件，Ru果文件里夹着一张照片，那是真的复印了一张照片；但Ru果文件里夹着一个U盘，复印出来的只是一张U盘的图片，你还得去原来的地方插那个U盘才Neng读里面的数据。

在JS里实现浅拷贝的方法有好几种，咱们挑几个Zui常用的说说。

1. Object.assign

这个方法简直是日常开发里的万金油，但你要记住它是浅拷贝。它只会把源对象自身的可枚举属性复制到目标对象里。Ru果源对象的属性值是个对象，那不好意思，只拷贝地址。

const target = { a: 1, b: 2 };
const source = { b: 4, c: { d: 5 } };
const returnedTarget = Object.assign;
console.log; // 5
// 此时Ru果你修改 source.c.d = 10，returnedTarget.c.d 也会变成 10

2. Array.prototype.slice

对于数组来说slice 方法也是个老熟人。它返回一个数组的一段，Ru果不传参数，它就Neng把整个数组“切”下来返回一个新数组。对于数组里的数字、字符串这些基本类型，它表现得像个深拷贝，但一旦数组里嵌套了对象，立马就现原形了。

var arr1 = ;
var arr2 = arr1.slice;
arr2.name = 'newName';
console.log; // 'newName' 

所以像上面这种直接赋值或者 slice 的方式，hen多时候并不是我们想要得到的结果。我们想要的是 arr 的值完全独立，不是吗？

既然浅拷贝这么不靠谱，那深拷贝就是我们的救星了。深拷贝会递归地拷贝所有层级的属性，在计算机内存中开辟一块全新的区域来存放这个新对象。两个对象在内存中完全独立，互不影响。无论你怎么折腾新对象，原对象dou稳如泰山。

这是Zui快上手的方法，思路就是先把对象转成字符串，再把字符串转成新的对象。

const obj1 = {
    body: { a: 10 },
    say: function{ console.log }
};
const obj2 = JSON.parse);
console.log; // undefined 

虽然这招一行代码就Neng搞定，简单快捷，但它的缺点也hen明显，甚至Ke以说是面试常考的“雷区”：

函数丢失： 因为 JSON 是一种数据交换格式，标准里只定义了数字、字符串、布尔值、数组、对象和 null。函数属于代码逻辑而非数据，所以在序列化时会被直接忽略。

循环引用报错： Ru果对象里有个属性指向自己，JSON.stringify 直接报错，根本跑不下去。

特殊值处理： 像 undefinedRegExpDate 这些类型，转完之后要么变味，要么变成 null。

既然现成的方法不完美，那就只Neng自己动手丰衣足食了。要写出一个完美的 deepClone，其实逻辑并不复杂，但细节决定成败。

核心思路就是：判断是不是对象？是对象的话，是数组还是普通对象？然后遍历属性，Ru果属性值还是对象，那就递归调用自己，直到拷贝到基本类型为止。

/**
 * 深拷贝递归实现
 * @param {Object} target 目标对象
 * @returns {Object}
 */
function deepClone {
    // 1. Ru果不是对象或者是 null，直接返回
    if  {
        return target;
    }
    // 2. 初始化返回结果
    const result = Array.isArray ?  : {};
    // 3. 遍历目标对象
    for  {
        // 4. 确保只遍历对象自身的属性，不包含原型链上的属性
        if ) {
            // 5. Ru果子属性还是对象，递归调用
            if  {
                result = deepClone;
            } else {
                // 6. 基本类型则直接赋值
                result = target;
            }
        }
    }
    return result;
}
// 测试一下
const original = { name: 'ouyang', arr: , fn:  => {} };
const cloned = deepClone;
cloned.arr = 999;
console.log; // 1 

这个版本Yi经Neng应付大部分场景了但是！面试官Ru果这时候问你：“Ru果对象里有循环引用怎么办？比如 a.b = a，你的代码会死循环吧？”

这时候你就得拿出WeakMap 这个大杀器了。思路是：在递归开始前，用一个 WeakMap 存储Yi经拷贝过的对象。每次拷贝前先查表，Ru果发现这个对象Yi经拷贝过了直接把之前的拷贝结果返回回去，这样就切断了死循环的链条。

为了让大家在面试场上Neng从容应对，我整理了几个高频问题，咱们来个实战演练。

参考回答： 必须是浅拷贝啊！它只拷贝源对象自身的可枚举属性到目标对象。Ru果源对象的属性值是一个指向对象的引用，它也只拷贝那个引用地址。一旦你修改了嵌套对象，原对象也会受影响。千万别被它的表面功Neng骗了。

参考回答： 这得怪 JSON 标准本身。JSON 的设计初衷是数据交换，它只认那几种基本的数据结构。函数在 JS 里是一等公民，但在 JSON 眼里它是不合法的数据，所以序列化的时候直接就被过滤掉了。同理，

Q3：如何解决深拷贝中的循环引用问题？

参考回答： 这是一个经典的进阶问题。正如我上面提到的，Ke以在递归函数外部维护一个哈希表。每次进入递归拷贝对象前，先kankan这个对象是不是在表里了。Ru果在说明Yi经拷贝过直接返回对应的值；Ru果不在拷贝并存入表中。这样就Neng完美避开死循环。