JS基本数据类型与引用类型的核心区别

假设你在开发一个用户设置模块，定义了默认配置 const defaultOptions = { theme: 'dark', autoSave: true };，随后将它赋值给新的变量 const userOptions = defaultOptions;。当用户把主题切换为明亮模式执行 userOptions.theme = 'light'; 后，你惊讶地发现原本作为模板的 defaultOptions.theme 竟然也变成了 'light'。然而在处理数字时，执行 let a = 10; let b = a; b = 20;，变量 a 却依旧稳固地保持着 10。

这种表面现象背后的根本原因，在于 JavaScript 对基本数据类型（Primitive Types）与引用数据类型（Reference Types）采用了截然不同的内存管理方式与底层操作机制。理解这两者的核心区别，是写出健壮前端代码、杜绝隐蔽数据污染与副作用的前提。

一、数据类型分类与定义清单

在 ECMAScript 规范中，语言内置的数据类型被严格划分为两大阵营：

1. 基本数据类型（7 种）

基本数据类型是指结构简单、直接代表具体数值且无法再向下细分的数据。在当前规范中共有 7 种：

• Number：双精度 64 位浮点数，包含整数、浮点数以及特殊的 NaN、Infinity。
• String：不可变的字符序列。
• Boolean：仅包含逻辑真假值 true 与 false。
• Undefined：未定义，变量声明但未赋值时的初始状态。
• Null：空值，表示一个意料之中的“空对象指针”或无值状态。
• Symbol：ES6 引入的唯一且不可变的值，常用于创建对象的私有属性键。
• BigInt：ES2020 引入的大整数，用于表示超过安全整数范围（2^53 - 1）的任意精度整数。

2. 引用数据类型（复合对象）

引用数据类型通常统一统称为 Object（对象），它是一种可以容纳多个键值对或复合元素的集合结构。由 Object 派生出来的常见实例形态包括：

• 普通对象（Object）：形如 { name: 'Alice' }。
• 数组（Array）：有序集合 [1, 2, 3]。
• 函数（Function）：在 JavaScript 中，函数是一等公民，其本质也是具有可执行特性的特殊对象。
• 内置工具对象：Date、RegExp、Map、Set、Promise 等。

二、核心区别一：内存存储模型的本质差异

计算机系统为 JavaScript 程序分配的运行时内存主要分为两个区域：栈内存（Stack）与堆内存（Heap）。基本类型与引用类型在内存中的驻留规则存在本质差异：

• 栈内存：结构为先进后出的连续内存空间，读写速度极快，大小固定且由系统自动分配和释放。基本数据类型占用的字节空间小且固定，因此其变量名与具体的数值直接完整地存放在栈内存中。
• 堆内存：结构为动态分配的无序内存空间，能够容纳大小可变、结构复杂的复合数据。引用数据类型（如对象、数组）体积不可预估，因此其实际的数据实体被分配在堆内存中，而栈内存中仅保存一个指向该堆内存物理地址的指针（Reference / 地址编号）。

三、核心区别二：变量赋值与数据修改的流转机制

由于存储机制的差别，对变量执行 let y = x 赋值操作时，两者的实际行为大不相同：

• 基本类型赋值（值拷贝）：系统会在栈中开辟一个崭新的内存单元给新变量，并将原变量的值完整复制一份存入。这两个变量从此毫无关联，修改任何一个都不会对另一个产生丝毫影响。
• 引用类型赋值（地址引用拷贝）：系统同样会在栈中为新变量开辟单元，但复制的仅仅是栈中存储的堆内存地址指针。结果是两个变量保存了完全相同的内存地址，它们同时指向堆内存中的同一个实体对象。通过任何一个变量修改内部属性，另一个变量读取时都会发现数据已发生改变。

// 1. 基本类型的独立复制
let num1 = 100;
let num2 = num1; // 栈中复制值 100
num2 = 200;      // 修改 num2 的栈数据
console.log(num1); // 100，完全不受影响

// 2. 引用类型的地址复制
let obj1 = { name: 'Vue' };
let obj2 = obj1;    // 栈中仅复制指针地址
obj2.name = 'React'; // 修改堆内存中的共享实体
console.log(obj1.name); // 'React'，受到同步改变！

四、核心区别三：全等比较（===）的判等逻辑

在使用严格全等运算符 === 比较两个变量时，底层的判断标准截然不同：

• 基本类型比对的是“值”：只要两个变量的数据类型相同，且字面量值相同，就会返回 true（例如 'hello' === 'hello'、42 === 42）。
• 引用类型比对的是“内存物理地址”：即使两个对象拥有完全相同的键值对，或者两个数组拥有完全相同的元素，只要它们是在堆内存中独立开辟的不同内存块（地址不同），比较结果一律为 false。

// 基本类型的比较：比较具体的值
console.log('abc' === 'abc'); // true
console.log(10 === 10);       // true

// 引用类型的比较：比较堆地址
const arr1 = [1, 2];
const arr2 = [1, 2];
console.log(arr1 === arr2); // false！因为它们在堆中处于两个不同地址

const arr3 = arr1;
console.log(arr1 === arr3); // true！指向同一个堆内存地址

这也是为什么在实际业务中，我们不能直接使用 objA === objB 来做深层内容比对，而需要使用 lodash 的 isEqual 或手写递归深比较。

五、核心区别四：函数参数传递机制与典型陷阱

很多开发者常有误解，认为“JavaScript 基本类型是按值传递，引用类型是按引用传递”。但严格从 ECMAScript 规范定义而言：JavaScript 中所有函数的参数传递一律是“按值传递”（Pass by Value）。

关键在于：当传递引用类型时，“所传递的值”本身就是那个内存地址指针的副本。在函数执行期，存在两个容易混淆的操作分支：

1. 修改对象内部属性：形参获得指针副本后，顺着该指针找到堆内存实体并修改其属性，这会真实改变外部对象。
2. 重新为形参赋值新对象：如果执行 obj = { newProp: 1 }，实际上只是让函数内部的局部形参变量指向了一个新的堆内存地址，外部原始变量的指针依然停留在原地，因此不会对外部产生影响。

六、切断引用副作用：浅拷贝与深拷贝实战方案

了解引用类型的共享特性后，我们在编写业务逻辑时，往往需要明确切断对象引用关联，以防止原始数据被意外篡改。根据拷贝深度的不同，常用的解决方案分为两大类：

1. 浅拷贝（Shallow Copy）

浅拷贝只复制对象的第一层属性。对于第一层的基本类型数据，会正常创建副本；但如果对象的某个属性本身又是对象或数组，浅拷贝依然只会复制该属性的指针引用。

• 常用实现手段：ES6 展开运算符 const copy = { ...source }、Object.assign({}, source)、数组的 source.slice()。
• 适用场景：对象只有一层简单扁平结构，无嵌套引用对象时。

const origin = { name: 'Admin', info: { age: 30 } };
const shallow = { ...origin };

shallow.name = 'User';
shallow.info.age = 18;

console.log(origin.name);     // 'Admin' (第一层基本类型不受影响)
console.log(origin.info.age); // 18 (深层嵌套对象依然被污染！)

2. 深拷贝（Deep Copy）

深拷贝会递归遍历目标对象的所有层级，在堆内存中为每一个子对象、子数组开辟全新的存储空间，彻底实现结构与数据的完全独立。

• 方案 A（原生推荐）：structuredClone()
  现代浏览器与 Node.js 17+ 内置的标准 API，性能出色，天然支持循环引用、Date、RegExp、Map、Set、ArrayBuffer 等复杂类型。

  const deepCopy = structuredClone(origin);

• 方案 B（简易方案）：JSON.parse(JSON.stringify(obj))
  代码短小，但存在明显缺陷：无法拷贝函数（Function）、undefined、Symbol（会被忽略或转为 null），无法处理循环引用（会直接抛出 TypeError 错误），且 Date 对象会被转成 ISO 字符串。
• 方案 C（第三方库）：Lodash 的 cloneDeep
  兼容性极高、边界处理完备的生产级工业方案。

七、常见误区与避坑指南

在日常代码编写和面试交流中，以下几个与类型特性高度相关的细节极易引发误解：

八、全景总结对比矩阵

为了便于速查与系统梳理，我们将基本数据类型与引用类型的核心维度整理为如下对比矩阵：

对比维度	基本数据类型 (Primitives)	引用数据类型 (Reference Types)
包含种类	Number, String, Boolean, Undefined, Null, Symbol, BigInt	Object, Array, Function, Date, RegExp, Map, Set 等
内存存储位置	栈内存（连续紧凑，固定大小）	堆内存（动态空间） + 栈内存（指针地址）
变量赋值表现	直接复制数值本身，两变量互不影响	复制指针地址，两变量共享同一堆对象
判等（===）机制	按值比较（值与类型一致即为 true）	按地址比较（指向同一堆内存才为 true）
参数传递行为	传递数值副本，函数内部无法影响外部	传递指针副本，修改属性会产生外部副作用
安全克隆手段	直接赋值 let b = a	简单对象用 {...obj}，复杂嵌套用 structuredClone()

掌握基本类型与引用类型的这套内存模型，不仅能够让你在面对复杂状态流转与对象赋值时游刃有余、远离数据污染 Bug，也为后续深入学习原型链、闭包、垃圾回收机制（V8 GC）等高级核心原理打下了坚实的认知基础。