JavaScript之内存空间

布满荆棘的人生 2022-01-19 04:57 265阅读 0赞

开发中，声明变量是每个前端都经常做的一件事，那么你声明的变量都是怎么存放的呢？

开发中的变量按数据类型分为

**基本数据类型**（Undefined、Null、Number、String、Boolean和Symbol）

**引用数据类型**（Object）

浏览器内存空间中有栈和堆，其中

**栈**存放**基本数据类型**以及**引用数据类型的内存地址**

**堆**存放**引用数据类型**

下面我们用图更加形象的解释一下栈和堆：

可以看到，当查找引用数据类型的时候，先在栈中找到它的内存地址，然后通过内存地址找到堆中的Object（可能这就是叫做引用数据类型的原因吧）

计算机对栈的读取要比堆快，而且栈中每个变量占有固定大小的空间，而Object的大小是变化的（可以对其进行增删改查操作），所以Object放在堆中，但是栈中存放有它对应的内存地址，通过这种方式实现引入数据类型的读取和操作。

可能代码+图会更加好理解：

let a = 1,b = 'str',c = {name:'c'},d = false;复制代码

接下来我们看几个例子：

let a = 1;
    let b = a;
    a = 2;
    a // 2
    b // 1复制代码

let a = 1,在内存中开辟a的内存1

let b=a,在内存中开辟b的内存1

a = 2,将a内存中的值修改为2

let obj1 = {name:'obj1'};
    let obj2 = obj1;
    obj1.name = 'obj2';
    obj1 // {name:'obj2'}
    obj2 // {name:'obj2'}复制代码

let obj1 = \{name:'obj1'\},在堆中保存对象 \{name:'obj1'\},并将变量obj1指向该对象的内存地址

let obj2 = obj1,在栈中创建obj2的空间，并将其指向\{name:'obj1'\}的内存地址

obj1.name = 'obj2',通过obj1对\{name:'obj1'\}的引用，修改其name为obj2,所以该对象变为\{name:'obj2'\}

总结：（源自高程3）

> 如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值复制 到为新变量分配的位置

> 当从一个变量向另一个变量复制引用类型的值时，同样也会将存储在变量对象中的值复制一份放到 为新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一 个对象。复制操作结束后，两个变量实际上将引用同一个对象。因此，改变其中一个变量，就会影响另 一个变量

既然说到内存，我们就再谈一下浏览器内存空间的管理，如上所述

当声明一个变量的时候，如果为基本数据类型，浏览器会为其在栈中分配内存空间，如果为引用数据类型，浏览器会为该变量在栈中分配内存空间，同时将其声明的Object存放在堆中，并将该变量指向Object的内存地址

接下来是该变量的使用过程（读，写）

如果该变量不再被使用，则将其释放，浏览器的垃圾回

而JavaScript 中最常用的垃圾收集方式是标记清除

当变量进入环境的时候（如：变量被声明），将其标记为‘进入环境’，而当该变量不再需要的时候，则将其标记为‘离开环境’。每隔一段时间，浏览器的垃圾收集器就会运行一次，将标记为‘离开环境’的变量回收，并释放其内存。

注：以上为了方便理解对垃圾回收机制做了简化，有兴趣的朋友可以自行查阅高程 4.3

如果有错误或者不严谨的地方，请给予指正，十分感谢！

转载于:https://juejin.im/post/5c948bac6fb9a070e82c13aa

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java基础之数组及其内存空间

1、本篇博客主要介绍数组的定义以及内存空间 2、源码如下 class ArrayDemo { public stat

ゝ一纸荒年。/ 2023年02月23日 05:21/ 0 赞/ 24 阅读

相关 javascript 命名空间

如果页面的js内容比较少的时候,确实命名空间的意义是没有的但是当有很多的 .js的外部连接的时候命名空间的作用还是可以体现出来的如某2个人共同写

朱雀/ 2022年07月13日 11:17/ 0 赞/ 135 阅读

相关 JVM内存空间总结

JVM内存空间包含：方法区、java堆、Java栈、本地方法栈。 java堆（JavaHeap） 1.堆是用来存放对象的，几乎所有对象都放在这里，被线程共享。 2.堆又可

╰半夏微凉°/ 2022年06月07日 04:26/ 0 赞/ 289 阅读

相关 JVM内存空间

图解结构 1. JVM基本结构图 ![这里写图片描述][211701565193505.jpg] 2. 《深入理解Java虚拟机（第二版）》中的描述

深碍√TFBOYSˉ_/ 2022年05月28日 06:51/ 0 赞/ 249 阅读

相关 JavaScript-命名空间

命名空间:管理变量，防止污染全局，适合模块开发。一个网页，软件的开发不可能是一个工程师完成的，那么多个工程师完成同一个项目的时候，命名重复问题肯定是有的，那么如何解决这个问

妖狐艹你老母/ 2022年05月27日 01:23/ 0 赞/ 178 阅读

相关内存地址存储，内存空间

[关于内存地址和内存空间的理解。][Link 1] 1.内存地址用4位16进制和8位16进制表示的区别。例如经常可以看到某些书籍上写的内存地址0x0001，在另外一些书籍上写

水深无声/ 2022年05月25日 10:42/ 0 赞/ 335 阅读

相关内存空间的分配

在内存中，供用户使用的内存空间分为三部分程序存储区静态存储区动态存储区程序存储区存放函数体的二进制代码，就是存放程序代码程序中所用的数据，分别

心已赠人/ 2022年05月17日 04:36/ 0 赞/ 212 阅读

相关 JavaScript系列之内存泄漏

在程序运行过程中不再用到的内存，没有及时释放，会出现内存泄漏（memory leak），会造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。而内存泄漏是每个开

客官°小女子只卖身不卖艺/ 2022年01月20日 09:57/ 0 赞/ 266 阅读

相关 JavaScript之内存空间

开发中，声明变量是每个前端都经常做的一件事，那么你声明的变量都是怎么存放的呢？开发中的变量按数据类型分为基本数据类型（Undefined、Null、Number、Str

布满荆棘的人生/ 2022年01月19日 04:57/ 0 赞/ 266 阅读

相关 JavaScript-内存空间

深入了解js这门语言后，才发现它有着诸多众所周知的难点（例如：闭包、原型链、内存空间等）。有的是因为js的设计缺陷导致的，而有的则是js的优点。不管如何，总需要去学会它们，在学

野性酷女/ 2021年09月14日 01:36/ 0 赞/ 352 阅读