一次彻底搞懂JavaScript中的引用赋值、浅拷贝和深拷贝
作者：2301_80853669
前言
如果你经常搞混 深浅拷贝 和 引用赋值，总是记不住它们有什么区别，在实际开发中总是踩坑——比如不小心修改了原始数据、或者拷贝不彻底导致奇怪的 bug——那么恭喜你，这篇文章就是为你写的！我会用最直白的语言、清晰的图示和大量实际代码示例，帮你一次性彻底搞懂！在深入探讨拷贝机制之前，我们需要先了解 JavaScript 的数据类型分类和内存存储机制的基础概念
一、基础概念铺垫
1. JavaScript 数据类型分类
- 基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol、BigInt。
- 引用数据类型：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）、日期（Date）、正则表达式、Map、Set、和其他内置对象（比如Promise、Error等)
2. 内存存储机制核心原理
JS 引擎将内存划分为栈内存（Stack） 和堆内存（Heap），不同类型的数据会被分配到不同的内存区域：嵌套引用依旧遵循下列规则
| 特性 | 栈内存 (Stack) | 堆内存 (Heap) |
|---|---|---|
| 存储内容 | 基本数据类型值、引用类型的指针 | 引用数据类型的实际内容 |
| 数据结构 | 后进先出 (LIFO) | 动态分配的树/图结构 |
| 分配方式 | 连续内存，自动分配 | 随机内存，动态分配 |
| 访问速度 | 极快（直接CPU访问） | 较慢（通过指针间接访问） |
| 大小限制 | 小（通常1-8MB） | 大（可达GB级） |
| 生命周期 | 函数/块作用域结束自动释放 | 由垃圾回收器(GC)管理 |
如上图所示，两种数据类型的内存访问流程如下所示：
- 基本数据类型的变量直接从栈内存中获取数据
- 引用数据类型的变量访问过程：
- 读取栈内存中的指针（地址）
- 通过指针找到堆内存中存储的实际数据
二、不同类型的拷贝行为
1. 基本数据类型的拷贝
基本数据类型的拷贝非常简单，由于它们直接存储在栈内存中，拷贝时会直接复制值本身，不存在引用关系。
let a = 10; let b = a; // 直接复制值 b = 20; console.log(a); // 10（不受 b 修改影响） console.log(b); // 20
2. 引用数据类型的拷贝
方式一：引用赋值（非拷贝）
引用数据类型在赋值时，默认是引用赋值（即复制指针地址），而非复制实际内容。这意味着两个变量会指向堆内存中的同一个对象。修改其中一个另一个会受影响。
let a = [1, 2, 5]; let b = a; // 引用赋值（复制指针） a[1] = 4; // 修改 a 指向的数组 console.log(a); // [1, 4, 5] console.log(b); // [1, 4, 5]（b 也受影响） console.log(a === b); // true（指向同一个对象）
方式二： 浅拷贝
浅拷贝是针对引用类型的拷贝方式，它会创建一个新对象，但只复制对象的第一层属性。其规则是：
- 对基本类型属性：直接复制值
- 对引用类型属性：仅复制指针（不复制指向的对象本身）
示例1:对数组 a = [1, 2, [3, 4], 5] 进行浅拷贝得到 b 后：
b[0]、b[1]、b[3]是基本类型，修改它们不会影响ab[2]是引用类型（数组），修改b[2]会同时影响a[2]，因为它们指向同一个子数组
const a = [1, 2, [3, 4], 5]; const b = [...a]; // 浅拷贝 a[0] = 100; console.log(b[0]); // 1（不受影响，基本类型独立） a[2][1] = 400; // 修改子数组元素 console.log(b[2][1]); // 400（受影响，共享子数组引用）
示例2：
// 原始对象
const a = {
name: "alice", // 基本类型（栈内存存储值）
profile: { // 引用类型（堆内存存储对象，栈内存存储指针）
age: 25,
city: "beijing"
}
};
// 使用扩展运算符进行浅拷贝
const b = { ...a };
// 修改浅拷贝对象
b.name = "bob";
b.profile.age = 30;
b.profile.city = "shanghai";
// 查看结果
console.log("原始对象 a.name:", a.name);
// 输出："alice"（基本类型值独立，不受影响）
console.log("原始对象 a.profile.age:", a.profile.age);
// 输出：30（引用类型共享堆内存，被修改）
console.log("原始对象 a.profile.city:", a.profile.city);
// 输出："shanghai"（引用类型共享堆内存，被修改）
console.log("a.profile === b.profile:", a.profile === b.profile);
// 输出：true（两者指向堆中同一个对象）
常见的浅拷贝方法：
- 扩展运算符（推荐）
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
- Object.assign()
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);
- 数组的 slice()、concat() 方法
const arr = [1, 2, { a: 3 }];
const shallowCopy1 = arr.slice();
const shallowCopy2 = [].concat(arr);
- Array.from()
const arr = [1, 2, { a: 3 }];
const shallowCopy = Array.from(arr);
方式三、深拷贝
深拷贝会创建一个全新的对象，完全复制原始对象的所有层级属性，包括嵌套的引用类型，使得新旧对象完全独立。
实现方式 1：JSON 方法（最常用但有局限）
// 原始对象
const a = {
name: "alice", // 基本类型（栈内存存储值）
profile: { // 引用类型（堆内存存储对象）
age: 25,
city: "beijing"
}
};
// 实现深拷贝
const deepCopy = JSON.parse(JSON.stringify(a));
// 修改深拷贝对象的属性
deepCopy.name = "bob"; // 修改基本类型
deepCopy.profile.age = 30; // 修改嵌套引用类型
deepCopy.profile.city = "shanghai";
// 查看结果对比
console.log("原始对象 a.name:", a.name);
// 输出："alice"（基本类型不受影响）
console.log("原始对象 a.profile.age:", a.profile.age);
// 输出：25（嵌套引用类型也不受影响）
console.log("原始对象 a.profile.city:", a.profile.city);
// 输出："beijing"（嵌套引用类型完全独立）
console.log("a.profile === deepCopy.profile:", a.profile === deepCopy.profile);
// 输出：false（两者指向堆中不同对象）
注意限制：
- 无法复制函数、undefined、Symbol
- 日期对象会被转换为字符串
- 无法处理循环引用
- 会丢失原型链信息
实现方式 2：递归实现（自定义深拷贝函数）
由于递归实现较为复杂，这里不展开详细代码，但基本原理是遍历对象的所有属性，对引用类型属性递归调用拷贝函数，直到所有层级都被复制。
三、深浅拷贝对比总结
| 类型 | 引用类型 | 内存地址 | 第一层修改 | 第二层修改 |
|---|---|---|---|---|
| 引用赋值 | 引用复制 | 相同 | 相互影响 | 相互影响 |
| 浅拷贝 | 仅第一层值复制，嵌套层引用复制 | 不同 | 独立 | 相互影响 |
| 深拷贝 | 完全复制 | 不同 | 独立 | 独立 |
深浅拷贝的核心区别在于对嵌套引用类型的处理方式，这直接决定了拷贝后对象的独立性：
- 引用赋值:本质上不是拷贝，只是复制了对象的引用指针。两个变量共享同一块堆内存，任何层级的修改都会相互影响，内存地址相同。
- 浅拷贝:创建新的内存地址存储对象，但仅对第一层属性进行值复制。对于基本类型属性，修改后彼此独立；但对于嵌套的引用类型属性，仍共享原始引用，修改会相互影响。
- 深拷贝:完全创建新的对象，递归复制所有层级的属性（包括嵌套引用类型）。新旧对象拥有完全独立的内存空间，任何层级的修改都不会相互影响，内存地址不同。
到此这篇关于JavaScript中引用赋值、浅拷贝和深拷贝的文章就介绍到这了,更多相关JS引用赋值、浅拷贝和深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！