js内存管理系列篇一：内存分析

分手后的思念是犯贱 2023-06-16 03:54 43阅读 0赞

> 说在前面

我是web光明顶一期的学生，本文是对深究JS原理这个阶段的分析。

在js里面，**内存**的概念大都被忽略了，大家都知道js是门高级语言，有自动的垃圾回收机制，所以很多人理所当然的觉得这个事情是不需要我们管的，那么你就大错特错了。

像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。相反，java，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理。那么，就存在了很大一个误区：我们以为我们压根就不用管内存这一块，所以一直都没注意，所以会导致一系列问题，比如内存泄漏。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

#### 日常碰到的问题 ####

**1. 问题一**  
写了一个for循环，不小心写成了个死循环，发现浏览器卡死了，为什么？这个就是因为不停的循环，变量一直在递增。把内存耗没了。可能大家还不知道什么问题，你都找不到问题在哪。你还以为是下小电影的时候把电脑搞中毒了。

**2.问题二**  
写游戏程序的时候，这个内存问题尤为突出，如果发生了卡顿或者延迟，这个很大几率就是内存不足的问题，我们可能定义了很多全局变量，或者闭包，使用完之后却没有回收，那么它将一直存在于内存中，甚至发生内存泄漏。

**3.问题三**  
喜欢看斗鱼直播或其它直播的朋友，大家是不是有碰到过这个问题？页面看久了忽然崩掉了，需要重新刷新，产生这种问题的原因可能有两个，1是内存持续增加没有去清理，崩掉了。2是flash里的bug 产生的内存泄露。

> 由此可见，内存是和性能直接相关的，是非常重要的一环。  
> 那我们就来讲一讲内存

### 内存模型(堆与栈) ###

js中并没有严格意义上区分栈内存与堆内存。因此我们可以粗浅的理解为js的所有数据都保存在堆内存中。但是在某些场景，我们仍然需要基于堆栈数据结构的思路进行处理。

那么先来讲一讲它的内存空间存储原理

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

> 为什么要把它类比成乒乓球盒子？

这种乒乓球的存放方式与栈中存取数据的方式是一样的。处于盒子中最顶层的乒乓球c，它一定是最后被放进去，但可以最先被使用。而我们想要使用底层的乒乓球I，就必须将上面的4个乒乓球取出来，让乒乓球1处于盒子顶层。这就是栈空间先进后出，后进先出的特点。图中已经详细的表明了栈空间的存储原理。

#### 队列与堆栈 ####

**队列**: 是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出  
**堆栈**: 是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出

> js数组实现队列和堆栈的功能

//队列 先进先出
     let arr = new Array();
      arr.unshift(1);
      arr.unshift(2);
      arr.unshift(3);
      arr.pop();
      console.log(arr);
      
      //堆栈 先进后出
      let arr2 = new Array();
      arr2.push(1);
      arr2.push(2);
      arr2.push(3);
      arr2.pop();
      console.log(arr2);

> 队列应用场景

比如说我们常用的QQ 它有一个回收机制大家知道吧，当长时间未登录的时候 就收回去 删掉这个用户 重新拿出来卖钱（一般是靓号） 美滋滋,那肯定是先排序，看谁未登录的时间最长，就先把它干掉 是不是 不可能是我上一秒刚登陆和个靓妹聊天 下一秒就把我干掉了 那我还不报警  
这个时候就用队列方法 从前往后面删 我们的数据库存了用户 当库存不下了 也是这么操作的

> 堆栈应用场景

比如说我们做了一个楼盘预售活动 名额100，报名200个，这个时候也就是从后往前删，先报名的保留。后面报名的逐个删除。

#### 内存分配 ####

这是两道道关于内存面试题，当我进行如下操作时，这时候，b是多少？

let a = 10;
     let b = a;
     b = 20;

在变量对象中的数据发生复制行为时，系统会自动为新的变量分配一个新值。给它新建一块内存空间  
let b = a执行之后，a与b虽然值都等于10，但是他们其实已经是相互独立互不影响的值了。具体如图。所以我们修改了b的值以后，a的值并不会发生变化。  
这是基本数据类型的相关操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]  
那么如果是这样的情况呢？引用类型，这时候的obj.aa为多少？

let obj = { aa:20,bb:30};
      let obk = obj;
       obk.aa = 10;

通过let obk = obj;执行一次复制引用类型的操作。引用类型的复制同样也会为新的变量自动分配一个新的值保存在变量对象中，  
但不同的是，这个新的值，仅仅只是引用类型的一个地址指针。  
当地址指针相同时，尽管他们相互独立，但是在变量对象中访问到的具体对象实际上是同一个。因此当我改变obk时，obj也发生了变化。这就是引用类型的特性。如图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]  
本文就到这里了，如果对你有帮助，欢迎点赞评论与转发，如果有错误之处，敬请指出。  
我们前端现在交流都在一个叫Web光明顶的公众号社区中，在这里也认识到了很多一起学习的小伙伴和技术大咖。  
大家对前端感兴趣的，也可以关注下这个公众号，内附有大量前端干货分享包括前端简历库关键是还不收费。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191124103957813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112410532518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191124110713493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191124111413335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70