当前位置：首页 > article >正文

JavaScript 简单类型与复杂类型-复杂类型的内存分配

article 2025/2/28 21:26:45

深入理解JavaScript中的简单类型（基本数据类型）和复杂类型（引用数据类型）如何在内存中存储对于编写高效、无误的代码至关重要。本文将专注于探讨复杂类型的内存分配机制，即堆（Heap）内存，并通过实例说明这些概念的实际应用。

内存基础：栈与堆

栈（Stack）

栈是一种后进先出（LIFO, Last In First Out）的数据结构，通常用于存储函数调用信息和局部变量。由于其结构特性，栈操作非常快速且直接，访问栈顶元素的时间复杂度为O(1)。简单类型的数据值就存储在栈内存中。

堆（Heap）

堆是一种动态分配的内存区域，适合于存储大小不固定的对象或需要长期存在的数据。与栈不同，堆上的数据没有特定的顺序，因此访问速度较慢，但灵活性更高。复杂类型的值实际存储在堆中，而栈中仅保存指向堆内存的引用地址。

特点：
- 存储复杂类型值。
- 所有线程共享同一块堆内存。
- 动态分配，管理相对复杂。

复杂类型的内存分配

JavaScript中的复杂类型包括：

Object
Array
Function
其他自定义对象

复杂类型的值是按引用传递的，这意味着当一个复杂类型的值被赋给另一个变量时，实际上是创建了一个新的引用，指向同一个堆内存地址。

示例1：对象的赋值

let obj1 = { name: "Alice" };
let obj2 = obj1;

console.log(obj1); // 输出: { name: 'Alice' }
console.log(obj2); // 输出: { name: 'Alice' }

obj2.name = "Bob";

console.log(obj1.name); // 输出: Bob
console.log(obj2.name); // 输出: Bob

在这个例子中，obj1和obj2都指向了堆中同一个对象，所以修改其中一个对象会影响另一个对象。

示例2：比较复杂类型的值

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];

console.log(arr1 === arr2); // 输出: false

let obj1 = { key: "value" };
let obj2 = obj1;

console.log(obj1 === obj2); // 输出: true

这里，尽管arr1和arr2包含相同的元素，但由于它们是不同的对象实例，各自的引用地址不同，所以比较结果为false。而obj1和obj2指向同一个对象，因此比较结果为true。

深拷贝 vs 浅拷贝

由于复杂类型是按引用传递的，直接赋值不会复制对象本身，而是复制了引用。为了创建对象的独立副本，我们需要使用深拷贝技术。

浅拷贝

浅拷贝只复制对象的第一层属性，如果对象中含有嵌套的对象或数组，则复制的是这些嵌套对象的引用，而不是完整的副本。

let original = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, original);

original.b.c = 3;

console.log(shallowCopy.b.c); // 输出: 3

深拷贝

深拷贝则会递归地复制整个对象树，确保新对象与原对象完全独立。

let original = { a: 1, b: { c: 2 } };
let deepCopy = JSON.parse(JSON.stringify(original));

original.b.c = 3;

console.log(deepCopy.b.c); // 输出: 2

注意：使用JSON.parse(JSON.stringify())进行深拷贝存在局限性，例如它不能处理函数、循环引用等特殊情况。

实际应用场景

场景1：对象的持久化

当你需要保存对象的状态以便后续恢复时，深拷贝是非常有用的。

function saveState(state) {
    return JSON.parse(JSON.stringify(state));
}

let gameState = { level: 1, score: 100, player: { name: "Hero", health: 100 } };
let savedState = saveState(gameState);

gameState.level = 2;
gameState.player.health = 80;

console.log(savedState); // 输出: { level: 1, score: 100, player: { name: 'Hero', health: 100 } }

场景2：函数作为参数传递

复杂类型也可以作为参数传递给函数，在这种情况下，传入的是对象的引用。

function updatePlayer(player) {
    player.health -= 10;
}

let player = { name: "Hero", health: 100 };

updatePlayer(player);

console.log(player.health); // 输出: 90