JS中变量的存储方式 -- 栈和堆

栈空间和堆空间

JS变量都存储在内存中，而内存给变量开辟了两块存储空间，分别为栈（stack）空间和堆（heap）空间
栈空间：存放JS基本数据类型，通过按值访问，可以直接操作保存在变量中的实际值。
堆空间：存放JS引用数据类型，通过对象的引用访问，不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地
址。

在了解栈和堆之前，我们先来了解一下js中的基本数据类型和引用数据类型

js中的数据类型分成两大类：基本数据类型和引用数据类型。
基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。
常见的基本数据类型：
Number、String 、Boolean、Null和Undefined。
引用类型数据：
就是对象类型 Object type，例如：Object 、Array 、Function 、Data等。（万物皆对象）
不论是何种数据类型都需要有一个地方把数据的内容保存下来，在我们给变量赋值的过程中，就是在做保存的过程。

栈空间（stack）

示例

let num1 = 1
let num2 = num1
num2 = 2
console.log(num1,num2) // 1,2 变量num1的值并没有因为变量num2值的改变而改变（互不影响）

流程图

当把数值1赋值给变量num1时，num1就在栈空间中占用了一份存储空间，把数值1存放到此空间中。
当把num1赋值给num2时，num2在栈空间中占用了新的一份存储空间，把数值1存放到此空间中。
当num2又被赋值为数值2时，将原来存储的数值1在内存中释放，把数值2存放到此空间中。

小结

声明一个变量，多次赋值时（赋值的内容都应为基本数据类型）就会取最后一个值
可以直接给变量赋值另一个变量,赋值之后的变量和原变量没有联系，类似于将内容存储在另一个新的空间（变量中存储的内容应为基本数据类型）

堆空间（heap）

示例

let obj1 = {name: 'zs',age: 20
}
let obj2 = obj1
obj2.age = 22
console.log(obj1.age,obj2.age) // 22,22 对象obj1中的age值因对象obj2的age值的改变而改变

流程图

当把对象赋值给变量obj1时，obj1就在堆空间中占用了一份存储空间，把对象存放到此空间中，把引用地址存放到栈空间中。
当把obj1赋值给obj2时，obj2在栈空间中占用了新的一份存储空间，把相同的引用地址存放到此空间中，指向相同的堆空间的数据。
当obj2里面的age属性值被重新赋值时，也就影响到obj1中的age属性值。

小结
将一个变量（存储的为引用类型数据）直接赋值给另一个变量以后相互之间的修改会互相影响对方，进而引出浅拷贝与深拷贝的问题。（以上示例中的obj1赋值给obj2为简单的浅拷贝）

当引用数据类型只有一层且需要深拷贝时，有一个特别简单的方式，使用扩展运算符...
示例代码

let obj1 = {name: 'zs',age: 20
}
let obj2 = {...obj1}
obj2.age = 22
console.log(obj1.age,obj2.age) // 20,22
/* 此时的obj2相当于在堆空间新开辟了一块内存把与obj1相同的数据值存储起来，并把这个新的引用地址保存在了一个全新的栈空间中，obj1与obj2互不影响 */

JS中变量的存储方式 -- 栈和堆相关推荐

c语言中负数的读取和存储,C语言中负数的存储方式
详细介绍负数的文章: https://blog.csdn.net/daiyutage/article/details/8575248 1.以char类型举例,其取值范围是 -128 ~ 127,即-2 ...
转载——C语言中float,double类型,在内存中的结构(存储方式)
最近在做一个数据格式分析和转换的项目,第一次接触底层的二进制代码存储,看的一头雾水,看到这个帖子后对于在Windows系统下数据的存储方式有了更多的了解,将原文分享一下: 原文地址为http://ww ...
单片机 bdata是布尔变量的存储方式
bdata是布尔变量的存储方式 uchar是unsigned char类型位变量flag被定义为bdata存储类型,编译时编译器将把该变量定位在51单片机片内数据存储区(RAM)中的位寻址区 uch ...
opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法，编辑一个自己的BufferUtil工具类
opengl中的Floatbuffer和IntBuffer与java中数据的存储方式不同的解决方法,编辑一个自己的BufferUtil工具类参考文章: (1)opengl中的Floatbuffer和 ...
js中变量名提升和函数名提升
首先,js中变量没有块级作用域,但是有函数作用域,即只有函数可以约数变量的作用域. 并且,函数的实质也是一个变量,所以可以改变它的值,即赋值.所以变量名提升和函数名提升非常相像. 1.变量名的提升发生 ...
Js中的Sort排序方式
Js中的Sort排序方式这里只列出部分排序方式 1.Sort排序 Sort排序是数组内置函数,但他的排序是根据系统字符默认排序 //数组const arr = [3,4,2,3,123,35,65, ...
js中变量赋值3e3的含义简介
js中变量赋值3e3的含义简介 3e3 3e3 getNewTimer = setTimeout(function () {get_new_sign_list()}, 3e3) 其中3e3含义 3e3 ...
Matlab中数据的存储方式
简介 MATLAB提供了丰富的算法以及一个易于操作的语言,给算法研发工作者提供了很多便利.然而MATLAB在执行某些任务的时候,执行效率偏低,测试较大任务量时可能会引起较长时间的等待.未解决这个问题, ...
Asp.net 请求中变量的保存方式
Session: 当前浏览器用户,在浏览器关闭后或者是指定时间后(默认为20分钟)失效同时根据Session的存储方式,有不同的情况: InProc:该模式Session将会被保存在IIS进程中,如 ...

JS中变量的存储方式 -- 栈和堆

栈空间和堆空间

栈空间（stack）

流程图

堆空间（heap）

JS中变量的存储方式 -- 栈和堆相关推荐

最新文章

热门文章