JS基本类型与引用类型详解：内存、操作与克隆策略

基础概念与核心差异

JavaScript 中的变量主要分为两类，它们在底层表现上有着截然不同的行为：

• 基本类型：包括 undefined、null、Boolean、Number、String、Symbol (ES6)。这类数据的值是不可变的，且直接存储在栈内存中。
• 引用类型：包括 Object、Array、RegExp、Date、Function 等。这类数据本质上是一个对象，包含可修改的属性和方法，其存储涉及栈内存与堆内存的配合。

第1步：验证值的可变性

通过尝试为变量添加属性，可以直观判断其属于哪类类型。基本类型的值一旦创建便不可改变，而引用类型的值允许动态添加属性和方法。

基本类型不可变示例

let person = '小明';
person.age = 18;
console.log(person.age); // undefined，因为字符串值本身无法挂接属性

引用类型可变示例

let person = { name: '小落子' };
person.age = 18;
person.addAge = function() {
    person.age2 = person.age + 1;
}
person.addAge();
console.log(person.age, person.age2); // 输出：18 19

上述代码明确展示了指向同一对象的引用如何随属性修改而变化，而基本类型则保持了其原始不变的特性。

第2步：解析内存存储结构

理解 JS 引擎如何分配内存是掌握这两类类型的根本。基本类型简单直接，而引用类型则需要协同两个区域。

基本类型：纯栈存储

基本类型的变量标识符及其对应的值都存放在栈内存（Stack）中。例如以下表格展示了两个变量在栈中的分布：

栈区直接保存了变量的名字和数据值，这使得基本类型的赋值实际上是“值的拷贝”，互不影响。

引用类型：栈堆协同存储

引用类型的存储相对复杂，需要内存的栈区和堆区共同完成：

• 栈区：保存变量的标识符（如 person）以及指向堆内存中该对象的指针（即对象的内存地址）。
• 堆区：实际存放对象的数据内容（属性名和值）。

第3步：掌握访问与比较规则

访问方式和比较逻辑的差异是导致许多初学者困惑的原因。基本类型是按值直接比较，而引用类型是比较它们在栈中记录的“地址”是否一致。

// 基本类型：按值比较
let a = '[]', b = '[]';
console.log(a === b); // true，两者的字符串值完全相同

// 引用类型：按地址比较
let c = [], d = [];
console.log(c === d); // false，虽然都是空数组，但它们存在于堆中不同的位置

即使变量 c 和 d 都是空数组，由于 JS 引擎分别为它们开辟了独立的堆内存空间，它们的栈内指针指向的是不同的地址，因此判定为不相等。

实战避坑：深度克隆策略

在实际开发和面试中，最常因混淆这两类类型而导致 Bug 的场景就是克隆（复制）。如果不注意处理方式的差异，极易引发数据意外联动。

• 浅克隆（Shallow Clone）：仅复制一层对象。对于引用类型，它复制了原对象的属性，但如果属性本身也是对象，则依然共享同一内存地址。此时修改副本中的嵌套对象，原对象也会随之变化。
• 深克隆（Deep Clone）：递归复制所有层级的数据，确保新对象拥有全新的内存地址。修改副本的任何层级都不会影响原对象。

针对基本类型，任何形式的赋值或浅/深克隆效果一致；但对于引用类型，必须采取专门的深克隆手段（如使用结构化克隆算法或递归序列化）来彻底阻断引用链接。

以上就是关于 JavaScript 基本类型与引用类型内存机制、比较规则及克隆处理的详细内容，更多关于 JS 数据类型原理的资料请关注本站其它相关文章！