详解JavaScript栈内存与堆内存

网络编程 2025/2/2 佚名

3 1 2

内存分配

在编译阶段，除了声明变量和函数，查找环境中的标识符这两项工作之外，还会进行内存分配。不同类型的数据会分配到不同的内存空间：

栈内存：引擎执行代码时工作的内存空间，除了引擎，也用来保存基本值和引用类型值的地址。
堆内存：用来保存一组无序且唯一的引用类型值，可以使用栈中的键名来取得。

示意图：

赋值与赋址

引擎不能直接操作堆内存中的数据，这就造成了对同一个变量赋不同类型的值，会出现完全不同的效果：为一个变量赋基本值时，实际上是创建一个新值，然后把该值赋给新变量，可以说这是一种真正意义上的" 赋值 “；为一个变量赋引用值时，实际上是为新变量添加一个指针，指向堆内存中的一个对象，属于一种” 赋址 "操作。

例子：

//基本值
var a = 1;
var b = a;
a = 2;
console.log(a); //输出：2
console.log(b); //输出：1

//引用值
//变量 c 和 d 指向堆中的同一个数组
var c = [0, 1, 2];
var d = c;
c[0] = 5;
console.log(c); //输出：[5, 1, 2]
console.log(d); //输出：[5, 1, 2]

浅拷贝

浅拷贝可以简单理解为，发生在栈中的拷贝行为，只能拷贝基本值和引用值的地址。

实现方式

ES6 定义了 Object.assign() 方法来实现浅拷贝。

例子：

let a = {
  name: "Tom",
  obj: {
    age: 19
  }
}
let b = Object.assign({}, a);
console.log(b); //输出：{name: "Tom",obj: {age: 20}}

a.name = "Amy";
a.obj.age = 20;

console.log(a); //输出：{name: "Amy",obj: {age: 20}}
console.log(b); //输出：{name: "Tom",obj: {age: 20}}
数组的 slice() 方法也属于浅拷贝
例子：
var a = [0, [1]];
var b = a.slice(0);
a[0] = 8;
a[1][0] = 9;

console.log(a); //输出：[8, [9]]
console.log(b); //输出：[0, [9]]

*concat() 方法也属于浅拷贝，这里不再叙述。

深拷贝

深拷贝可以简单理解为，同时发生在栈中和堆中的拷贝行为，除了拷贝基本值和引用值的地址之外，地址指向的堆中的对象也会发生拷贝。

实现方式

将需要深拷贝的对象序列化为一个 JSON 字符串，然后根据这个字符串解析出一个结构和值完全一样的新对象，可以间接实现深拷贝。

例子：

let a = {
  name: "Tom",
  obj: {
    age: 19
  }
}
var b = JSON.parse(JSON.stringify(a));
console.log(b); //输出：{name: "Tom",obj: {age: 19}}

a.name = "Amy";
a.obj.age = 20;

console.log(a); //输出：{name: "Amy",obj: {age: 20}}
console.log(b); //输出：{name: "Tom",obj: {age: 19}}

*这种方法需要保证对象是安全的，例如属性值不能是 undefined、symbol、函数、日期和正则。

使用 $.extend() 方法实现深拷贝

$.extend() 方法并非原生 JavaScript 提供的方法，属于 jquery 的方法。这个方法提供的实现深拷贝的基本思路是：如果是基本值或除了对象或数组之外的引用值，直接赋值；如果是对象或数组就需要进行递归，直到递归到基本值或除了对象或数组之外的引用值为止。

jquery 中 $.extend() 方法的代码片段：

//如果 copy 内容是数组或对象则继续调用 extend 函数
if (deep && copy && (jQuery.isPlainObject(copy) || 
(copyIsArray = jQuery.isArray(copy)))) {
  if (copyIsArray) {
    copyIsArray = false;
    clone = src && jQuery.isArray(src) "htmlcode">

//深拷贝函数
function extend(source) {
  var target = Array.isArray(source) "[object Object]";
    if (isObject || Array.isArray(source[key])) {
      //如果是对象或数组，继续调用 extend 函数
      target[key] = extend(source[key]);
    } else {
      //递归到基本值或除了对象或数组之外的引用值，直接赋值
      target[key] = source[key];
    }
  }
  return target;
}

//测试代码
var a = {
  a1: undefined,
  a2: null,
  a3: 123,
  a4: false,
  a5: "Tom",
  a6: Symbol.for("6"),
  obj: {
    s: "book",
    n: 10
  },
  arr: [1, 2, 3, [4]],
  fn: function() {
    console.log(999);
  },
  now: new Date(),
}

var b = extend(a);

a.a5 = "Amy";
console.log(a.a5); //输出：Amy
console.log(b.a5); //输出：Tom

a.obj.s = "pen";
console.log(a.obj.s); //输出：pen
console.log(b.obj.s); //输出：book

a.arr[3][0] = 9999;
console.log(a.arr[3][0]); //输出：9999
console.log(b.arr[3][0]); //输出：4




运行时流程图
结合本课的的内容，JavaScript 的运行时流程图如下：

*这张图会根据内容的增加不断进行补充。
以上所述是小编给大家介绍的JavaScript栈内存与堆内存详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

JavaScript栈内存与堆内存

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解JavaScript栈内存与堆内存”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年02月02日

详解JavaScript栈内存与堆内存

利用Node.js如何实现文件循环覆写

jQuery中实现text()的方法

评论“详解JavaScript栈内存与堆内存”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接