JavaScript 基本类型与引用类型区别解析

在 JavaScript 中，数据类型可以分为两大类：基本类型（Primitive Types） 和 引用类型（Reference Types）。它们在内存中的存储方式有显著的区别，理解这些区别对于编写高效、可靠的代码非常重要。

1. 基本类型（Primitive Types）

基本类型包括以下几种：

• undefined
• null
• boolean
• number
• string
• symbol（ES6 新增）
• bigint（ES2020 新增）

存储方式：

• 栈内存（Stack Memory）：基本类型的值直接存储在栈内存中。栈内存是一种线性数据结构，具有快速访问的特点。
• 按值传递（Pass by Value）：当基本类型的值被赋值给另一个变量时，实际上是将值的副本赋给了新变量。因此，修改一个变量的值不会影响另一个变量。

let a = 10;
let b = a;  // b 是 a 的副本
b = 20;

console.log(a); // 10
console.log(b); // 20

2. 引用类型（Reference Types）

引用类型包括：

• Object
• Array
• Function
• Date
• RegExp
• 其他内置对象

存储方式：

• 堆内存（Heap Memory）：引用类型的值存储在堆内存中。堆内存是一种非线性的数据结构，适合存储大小不固定的数据。
• 按引用传递（Pass by Reference）：当引用类型的值被赋值给另一个变量时，实际上是将指向堆内存中对象的引用（指针）赋给了新变量。因此，两个变量指向同一个对象，修改其中一个变量会影响另一个变量。

let obj1 = { name: 'Alice' };
let obj2 = obj1;  // obj2 和 obj1 指向同一个对象

obj2.name = 'Bob';

console.log(obj1.name); // 'Bob'
console.log(obj2.name); // 'Bob'

3. 内存管理

• 基本类型：由于基本类型的值直接存储在栈内存中，它们的生命周期与变量的作用域绑定。当变量超出作用域时，栈内存中的值会被自动释放。
• 引用类型：引用类型的值存储在堆内存中，栈内存中只存储指向堆内存的引用。当引用类型的变量超出作用域时，栈内存中的引用会被释放，但堆内存中的对象不会被立即释放，直到没有任何引用指向它时，垃圾回收机制（Garbage Collection）才会回收这部分内存。

4. 性能考虑

• 基本类型：由于基本类型的值直接存储在栈内存中，访问速度较快，适合存储简单的数据。
• 引用类型：引用类型的值存储在堆内存中，访问速度相对较慢，但适合存储复杂的数据结构。

5. 深拷贝与浅拷贝

由于引用类型的特性，直接赋值会导致多个变量共享同一个对象。为了避免这种情况，通常需要进行深拷贝或浅拷贝：

• 浅拷贝（Shallow Copy）：只复制对象的第一层属性，嵌套的对象仍然是共享的。
• 深拷贝（Deep Copy）：递归复制对象的所有层级，生成一个完全独立的对象。

// 浅拷贝
let obj1 = { a: 1, b: { c: 2 } };
let obj2 = Object.assign({}, obj1);

obj2.b.c = 3;
console.log(obj1.b.c); // 3

// 深拷贝
let obj3 = JSON.parse(JSON.stringify(obj1));
obj3.b.c = 4;
console.log(obj1.b.c); // 3

总结

• 基本类型：存储在栈内存中，按值传递，访问速度快。
• 引用类型：存储在堆内存中，按引用传递，适合存储复杂数据结构，但访问速度相对较慢。

理解这些区别有助于更好地管理内存、优化性能，并避免常见的编程错误。