JavaScript 值类型与引用类型的内存机制及常见陷阱解析

值类型与引用类型的内存存储机制

值类型，亦被称为原始数据或原始值（primitive value）。

此类数据直接存储于栈（stack）内存中。栈是一种遵循后进先出（LIFO）原则的线性数据结构：新数据通过压入（push）操作置于栈顶，读取时从栈顶弹出（pop）。由于值类型的变量名与其实际数据占据同一内存位置，因此访问变量即直接获取其简单数据段。

引用类型的数据则存储于堆（heap）内存区域。堆属于动态内存分配区，在程序运行期间由系统根据代码和栈的需求动态分配空间。

堆内存中通常存放对象实例。栈中的变量并不直接持有对象数据，而是持有一个指向堆中对象的引用指针（point）。这种机制使得变量名与对象实际数据在内存地址上分离，二者通过指针建立关联。当执行读写操作时，计算机依据变量持有的指针定位到堆中的具体数据块并进行处理。

引用类型在数组操作中的常见陷阱

在实际开发中，理解这一机制有助于排查特定问题，以下通过代码示例进行说明。

var a = [ [],[],[1,2,3] ]
var b = ['颜色','大小','尺寸']
var arr = []
for(let i = 0; i < a.length; i ++){
  let obj = {}
  for(let j = 0; j < a[i].length; j ++){
    obj[b[i]] = a[i][j]
    arr.push(obj)
    console.log(arr)
    console.log(obj)
  }

}
console.log(arr)

基于上述代码逻辑，预期的 arr 数组结果应当呈现为包含独立对象的状态。

[ { '尺寸': 1 }, { '尺寸': 2 }, { '尺寸': 3 } ]

然而，实际运行后 arr 的结果却出乎意料，所有元素指向了相同的最终状态。

[ { '尺寸': 3 }, { '尺寸': 3 }, { '尺寸': 3 } ]

问题根源分析与解决方案

经过技术社群讨论与自我验证，最终确认该现象源于值类型与引用类型在内存处理上的本质区别。

JavaScript 中的数据大致可分为两类：值类型与引用类型。

常见的值类型包括：数值（number）、布尔值（boolean）、null 以及 undefined。

常见的引用类型包括：对象（object）、数组（array）以及函数（function）。

在示例中，尽管每次循环打印出的 obj 对象看似不同，但由于 obj 和 arr 均涉及引用类型，将 obj 推入（push）arr 时，实际存入的是 obj 在堆内存中的地址引用。因此，当后续循环中 obj 的属性被修改为 3 时，arr 中所有已存入的对象引用均指向该被修改后的内存地址，导致 arr 内所有元素最终都显示为 3。这一现象虽具迷惑性，但修复方案十分直接。

var a = [ [],[],[1,2,3] ]
var b = ['颜色','大小','尺寸']
var arr = []
for(let i = 0; i < a.length; i ++){
  for(let j = 0; j < a[i].length; j ++){
  let obj = {}
    obj[b[i]] = a[i][j]
    arr.push(obj)
  }
}
console.log(arr)

解决该问题的关键在于将 obj 的声明语句移至最内层循环内部。这样，每次循环迭代都会创建一个新的对象实例并分配独立的内存地址。即使后续 obj 被修改为 3，也不会影响之前已存入 arr 的其他独立对象，因为它们的内存地址互不干扰。

以上是对 JavaScript 值类型与引用类型内存机制及常见应用陷阱的初步探讨，旨在帮助开发者规避相关错误。如有任何疑问或补充，欢迎留言交流，我们将及时回复。感谢各位对本站的支持与关注。