JavaScript基本数据类型与引用类型有什么区别

在 JavaScript 中，数据类型被划分为两大阵营：基本数据类型（Primitive Types）与引用数据类型（Reference Types）。它们的核心区别在于内存中的存储位置与管理机制——基本数据类型的值大小固定，直接按值保存在调用栈（Stack）中；而引用数据类型结构复杂、大小动态可变，其实际对象实体保存在堆内存（Heap）中，栈内存中只存放指向该堆内存的指针地址。由这一存储本质，衍生出了变量赋值、相等比较、函数传参以及数据可变性等一系列行为上的显著差异。

一、分类全貌：两种类型分别包含哪些成员

JavaScript 是一门弱类型、动态类型的脚本语言。在 ECMAScript 最新规范中，数据类型被划分为以下两类：

• 基本数据类型（共 7 种）：Number、String、Boolean、Undefined、Null、Symbol（ES6新增，表示唯一值）、BigInt（ES2020新增，表示任意精度的整数）。
• 引用数据类型：统称为 Object（对象）。常见的标准派生结构包括通用普通对象（Object）、数组（Array）、函数（Function）、日期对象（Date）、正则表达式（RegExp）以及现代集合结构（Map、Set、WeakMap、WeakSet）。

二、底层存储机制：栈内存（Stack）与堆内存（Heap）

理解这两种类型的本质区别，必须先理解 JavaScript 运行时的内存划分模型：

栈内存（Stack）：由系统自动分配和释放内存空间，结构遵循“后进先出”原则。栈内存空间连续、存取速度极快，适合存储生命周期明确、占用空间小且大小固定的数据。基本数据类型的值就直接保存在栈内存对应的变量槽中。

堆内存（Heap）：属于动态分配的内存区域，大小不固定。对象可以随时添加、删除属性，大小不可预估，因此存放在相对自由的堆内存中。在代码执行时，变量在栈内存中记录的并不是对象的内容，而是该对象在堆内存中的十六进制起始物理地址（引用指针）。

三、变量赋值机制：值拷贝与地址共享

当我们将一个变量赋值给另一个变量时，基本类型与引用类型的表现完全不同：

• 基本类型赋值（值拷贝）：系统会在栈中新分配一块独立的内存空间，将原本的值完整复制过去。修改新变量的值，对原变量完全没有任何影响。
• 引用类型赋值（地址引用复制）：系统复制的仅仅是保存在栈中的指针地址，两个变量实际指向堆内存中同一块物理对象。通过任一变量修改对象属性，另一个变量读取时都会发生变化。

// 1. 基本类型的独立复制
let x = 10;
let y = x; // 在栈中开辟新槽，将 10 复制给 y
y = 20;
console.log(x); // 输出: 10，完全不受 y 变化的影响

// 2. 引用类型的地址共享
let obj1 = { title: "JavaScript指南" };
let obj2 = obj1; // 仅复制了指针地址，两者共享同一个堆对象
obj2.title = "CSS揭秘";
console.log(obj1.title); // 输出: "CSS揭秘"，obj1 同步改变！

四、相等比较（===）的判别标准差异

使用严格相等运算符 === 进行判断时，两者的运算逻辑遵循不同原则：

• 基本类型：比较的是“数据内容是否相等”。只要类型相同且值相等，比较结果即为 true。例如 "abc" === "abc" 为 true（唯一特殊例外是 NaN === NaN 为 false）。
• 引用类型：比较的是“引用地址是否相同”，而非对象内容。即使两个对象的内部键值完全一致，只要它们在堆内存中位于不同的独立空间，比较结果依然是 false。只有当两个变量指向同一个堆地址实体时，比较结果才为 true。

// 1. 基本类型的比较
const str1 = "Ku";
const str2 = "Ku";
console.log(str1 === str2); // true（值相等即可）

// 2. 引用类型的比较
const userA = { id: 1 };
const userB = { id: 1 };
console.log(userA === userB); // false！（两者处于堆内存的不同物理位置）

const userC = userA;
console.log(userA === userC); // true（指向相同的内存地址 0x...）

五、不可变性（Immutability）与可变性

基本数据类型的值是绝对不可变的（Immutable）。任何针对基本类型的操作（例如字符串拼接、大小写转换、数值计算），都不会改变原来的值，而是由引擎在内存中计算并创建出一个全新的基本类型值返回。

let text = "hello";
text.toUpperCase(); // 返回新字符串 "HELLO"
console.log(text);  // 依然是 "hello"，原字符串未被改动

text[0] = "H";      // 试图通过索引修改单个字符
console.log(text);  // 依然是 "hello"，静默失败或在严格模式下报错

相对地，引用类型是高度可变的（Mutable）。我们可以在不更换其堆内存物理地址的前提下，任意向其增加、删除或修改属性成员：

const list = [1, 2, 3];
list.push(4);      // 原数组被直接改变为 [1, 2, 3, 4]
list[0] = 99;      // 修改内部元素
console.log(list); // [99, 2, 3, 4]
// 注意：即使声明为 const，锁定的是栈内存中的指针不可重赋值，对象内部仍然可变！

六、函数参数传递机制与重赋值陷阱

JavaScript 中所有函数的参数传递都是按值传递（Pass by Value）的。但因为“值”的形态不同，导致了初学者经常困惑的表现：

• 传递基本类型：向函数形参复制一份栈内存中的具体值。在函数体内部给参数重新赋值，绝对不会影响外部实参。
• 传递引用类型：向函数形参复制一份堆内存的指针地址（共享同一堆对象）。若在函数内部修改属性，外部对象将受到影响；但如果在函数内部对形参执行整体重赋值，实际上是将局部形参指针指向了一个新的对象，外部原对象丝毫不受影响。

function modify(val, obj, reassignObj) {
  val = 999;               // 内部修改，不影响外部
  obj.name = "已修改";      // 修改共享堆对象的属性，外部同步改变
  reassignObj = { name: "新对象" }; // 局部形参切断原指向，不影响外部
}

let num = 10;
let user1 = { name: "初始A" };
let user2 = { name: "初始B" };

modify(num, user1, user2);

console.log(num);        // 10（保持不变）
console.log(user1.name); // "已修改"（属性被改变）
console.log(user2.name); // "初始B"（外部指向未被改变）

七、如何准确检测与区分数据类型

在日常开发中，需要根据具体场景选择合适的类型检测手段：

1. typeof 操作符

用于快速检测基本类型（如 typeof "abc" === "string"、typeof 123 === "number"、typeof function(){} === "function"）。

2. instanceof 操作符

用于检测引用类型是否属于某个构造函数的实例，其原理是顺着原型链（__proto__）向上查找匹配 prototype。

const arr = [];
console.log(arr instanceof Array);  // true
console.log(arr instanceof Object); // true
// 不能准确检测基本类型，例如 123 instanceof Number 返回 false

3. Object.prototype.toString.call()（终极标准方案）

利用内部属性 [[Class]] 返回标准的 "[object Type]" 字符串，能够跨环境准确分辨所有内置基本类型与复杂引用类型：

function getType(val) {
  return Object.prototype.toString.call(val).slice(8, -1).toLowerCase();
}

console.log(getType(123));        // "number"
console.log(getType(null));       // "null" （精准避开 typeof 缺陷）
console.log(getType([]));         // "array"
console.log(getType(/abc/));      // "regexp"
console.log(getType(new Map()));  // "map"

八、核心区别汇总对比

为了便于速查与深入记忆，基本数据类型与引用类型的核心特性差异总结如下表：