JavaScript 基本类型与引用类型的核心区别及赋值机制解析

结果或目标：理解 JS 数据分类

ECMAScript 标准将数据类型划分为两大类：基本类型值（Primitive values）和引用类型值（Reference values）。区分它们的核心在于数据的存储位置及赋值时的行为模式。基本类型直接保存实际数据，而引用类型保存指向堆内存中对象的指针。

准备条件：掌握栈与堆的概念

• 栈（Stack）：自动分配内存，存储空间小，速度快，适合存储固定大小的基本类型数据。
• 堆（Heap）：动态分配内存，空间大，适合存储大小不确定的复杂对象。

真实操作顺序：基本类型的赋值机制

第1步：识别常见基本类型

JavaScript 的基本类型包括 Undefined、Null、Boolean、Number 和 String。这类数据可以直接访问保存在变量中的实际值，且占用固定字节。

第2步：执行值传递赋值

当将一个基本类型变量赋值给另一个变量时，系统会在栈内存中创建一个新副本。修改新变量的值不会影响原变量。

var a = 10;
var b = a; // b 获得 a 值的副本
b = 20;
console.log(a); // 输出: 10

var bl = true;
var bl1 = bl; // bl1 获得 bl 值的副本
bl1 = false;
console.log(bl); // 输出: true

完成状态判断：改变拷贝后的变量（b 或 bl1），原变量（a 或 bl）的值保持不变，证明两者在内存中完全独立。

上图展示了基本数据类型赋值的过程：两个变量在栈中各自拥有独立的数据区域。

真实操作顺序：引用类型的赋值机制

第1步：创建引用类型实例

引用类型主要包括 Object、Array、Function 等。它们在堆内存中分配空间，栈内存中仅保存指向堆内存的地址（引用）。

第2步：执行引用传递赋值

将引用类型变量赋值给另一个变量时，栈内存中保存的是同一个堆内存地址的副本。因此，两个变量指向同一个对象，任何一个变量的修改都会反映在另一个变量上。

var obj1 = new Object();
var obj2 = obj1; // obj2 获得 obj1 在栈中的地址引用
obj2.name = "我有名字了";
console.log(obj1.name); // 输出: 我有名字了

完成状态判断：通过 obj2 添加属性后，obj1 也能访问该属性，说明两者共同指向堆内存中的同一对象。

上图演示了引用类型赋值过程：栈中两个变量指向堆中同一个对象。

原文有依据的排错：为什么不能随意扩展基本类型？

虽然基本类型在逻辑上不应包含属性，但尝试为其添加属性不会报错，只是无法访问。这是因为 JavaScript 引擎在访问属性时会临时创建一个包装对象，访问结束后立即销毁，而非真正修改基本类型值本身。

var a = 12;
a.name = "myname";
console.log(a.name); // 输出: undefined

风险提醒：不要依赖为基本类型添加属性来传递数据，这在大多数引擎中无效且易产生逻辑错误。

简要总结：String 的特殊性

String 是 ECMAScript 中的一个特殊基本类型。它按值传递（修改副本不影响原串），但内部实现可能采用类似引用的优化策略以提高效率。此外，字符串是不可变的（Immutable），任何看似“修改”字符串的操作（如 substring、拼接），实际上都是生成并返回一个新的字符串实例，原字符串在内存中保持不变并最终被垃圾回收。

例如：

var a = "myobject";
a = a.substring(3,5);
console.log(a); // 输出: bj
// 原字符串 "myobject" 未被修改，a 现在指向新字符串 "bj"

以上就是 JavaScript 中基本类型和引用类型的详细分析，更多关于 JavaScript 基础知识的资料请关注本站其它相关文章！