JS中原始值和引用值的储存方式示例详解

在 ECMAScript 中，数据类型的存储方式是一个重要的概念。我们可以将数据分为两类：原始值和引用值。这两种类型的值不仅代表不同的数据类型，而且在内存中的存储和访问方式也有所不同。

原始值，也被称为基本数据类型，包括 Number、String、Boolean、Null 和 Undefined。这些类型的值直接存储在栈内存中。当我们将一个原始值赋给另一个变量时，实际上是在栈内存中复制了该值的内存地址。这两个变量是完全独立的，一个变量的值改变不会影响另一个变量。

与此相反，引用值（也称为复合数据类型）包括 Object、Function、Array、Date 和 RegExp 等。这些类型的变量存储在栈中的是一个指向堆内存中实际对象的指针。这意味着当我们把一个引用值赋给另一个变量时，我们实际上是在复制这个指针，而不是对象本身。这两个变量指向的是同一个对象。如果我们通过方法改变其中一个变量的值（即堆内存中的数据），另一个变量也会反映出这种变化。

如果我们不通过方法而是通过重新赋值来改变引用变量的值，那么我们会为这个新的引用变量在堆内存中创建一个新的对象，这样原来的指针就会失效。这就是为什么当我们直接改变一个引用变量的值时（例如，将其设置为一个新的数组或对象），原来的对象不会被改变。

让我们通过一些示例代码来更好地理解这个概念：

```javascript

// 原始值的示例

var a = "hello"; // a的值存储在栈中

var b = a; // b是a的副本，它们各自的值互不影响

a = "world"; // 改变a的值不会影响b

console.log(a); // 输出 "world"

console.log(b); // 输出 "hello"

// 引用值的示例

var arr = [1, 3]; // arr指向一个对象（数组），该对象存储在堆中

var arr1 = arr; // arr1也是指向同一个对象的指针

arr.push(5); // 通过方法改变arr的值（即堆内存中的数据）会影响arr1

console.log(arr); // 输出 [1, 3, 5]

console.log(arr1); // 输出同样的数组，因为它们是同一个对象

arr = [7, 8]; // 改变arr的指针，使其指向一个新的对象

console.log(arr); // 输出新的数组 [7, 8]

console.log(arr1); // 输出原来的数组 [1, 3, 5]，因为arr1仍然指向原来的对象

```

基本数据类型的值直接保存在栈中；而引用类型的变量在栈中有一个指向堆中实际对象的指针。理解这一点对于理解 JavaScript 中的变量和对象是非常重要的。