js的栈内存和堆内存

栈内存和堆内存在了解一门语言底层数据结构上,挺重要的,做了个总结

JS中的栈内存堆内存

JS的内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。

其中栈存放变量,堆存放复杂对象,池存放常量,所以也叫常量池。


栈数据结构

栈是一种特殊的列表,栈内的元素只能通过列表的一端访问,这一端称为栈顶。栈被称为是一种后入先出(LIFO,last-in-first-out)的数据结构。由于栈具有后入先出的特点,所以任何不在栈顶的元素都无法访问。为了得到栈底的元素,必须先拿掉上面的元素。


堆数据结构

堆是一种经过排序的树形数据结构,每个结点都有一个值。
通常我们所说的堆的数据结构,是指二叉堆。
堆的特点是根结点的值最小(或最大),且根结点的两个子树也是一个堆。
由于堆的这个特性,常用来实现优先队列,堆的存取是随意,这就如同我们在图书馆的书架上取书,
虽然书的摆放是有顺序的,但是我们想取任意一本时不必像栈一样,先取出前面所有的书,
我们只需要关心书的名字。


基本数据类型
  1. Sting
  2. Number
  3. Boolean
  4. null
  5. undefined
  6. Symbol

基本数据类型保存在栈内存中,因为基本数据类型占用空间小、大小固定,通过按值来访问,属于被频繁使用的数据。

let num1 = 1; let num2 = 1; // 闭包中的基本数据类型变量不保存在栈内存中,而是保存在堆内存中

引用数据类型

Array,Function,Object...可以认为除了上文提到的基本数据类型以外,所有类型都是引用数据类型。
引用数据类型存储在堆内存中,因为引用数据类型占据空间大、大小不固定。
如果存储在栈中,将会影响程序运行的性能;
引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。
当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体

// 基本数据类型-栈内存 let a1 = 0; // 基本数据类型-栈内存 let a2 = 'this is string'; // 基本数据类型-栈内存 let a3 = null; // 对象的指针存放在栈内存中,指针指向的对象存放在堆内存中 let b = { m: 20 }; // 数组的指针存放在栈内存中,指针指向的数组存放在堆内存中 let c = [1, 2, 3];

avatar


基本数据类型的复制
let a = 20; let b = a; b = 30; console.log(a); // 20

a、b 都是基本类型,它们的值是存储在栈内存中的,a、b 分别有各自独立的栈空间, 所以修改了 b 的值以后,a 的值并不会发生变化。
avatar


引用数据类型的复制
let m = { a: 10, b: 20 }; let n = m; n.a = 15; console.log(m.a) // 15

m、n都是引用类型,栈内存中存放地址指向堆内存中的对象, 引用类型的复制会为新的变量自动分配一个新的值保存在变量中, 但只是引用类型的一个地址指针而已,实际指向的是同一个对象, 所以修改 n.a 的值后,相应的 m.a 也就发生了改变。
avatar


栈内存和堆内存的优缺点

在JS中,基本数据类型变量大小固定,并且操作简单容易,所以把它们放入栈中存储。
引用类型变量大小不固定,所以把它们分配给堆中,让他们申请空间的时候自己确定大小,这样把它们分开存储能够使得程序运行起来占用的内存最小。
栈内存由于它的特点,所以它的系统效率较高。
堆内存需要分配空间和地址,还要把地址存到栈中,所以效率低于栈。


栈内存和堆内存的垃圾回收

栈内存中变量一般在它的当前执行环境结束就会被销毁被垃圾回收制回收, 而堆内存中的变量则不会,因为不确定其他的地方是不是还有一些对它的引用。 堆内存中的变量只有在所有对它的引用都结束的时候才会被回收。


闭包与堆内存

闭包中的变量并不保存中栈内存中,而是保存在堆内存中。 这也就解释了函数调用之后之后为什么闭包还能引用到函数内的变量。

function A() { let a = 1; function B() { console.log(a); } return B; } let res = A();

转自


EOF

本文作者mapleChain
本文链接https://www.cnblogs.com/mapleChain/p/12061470.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

原文地址:https://www.cnblogs.com/showcase/p/12598983.html