js进栈出栈_浅析JS堆、栈、执行栈和EventLoop

最新推荐文章于 2023-04-27 11:02:30 发布

weixin_39800062

最新推荐文章于 2023-04-27 11:02:30 发布

阅读量305

点赞数 1

文章标签： js进栈出栈

本文链接：https://blog.csdn.net/weixin_39800062/article/details/111810625

版权

现在前端面试，大多都会问到关于事件循环、执行栈等问题，本文通过案列、图片等形式给大家讲解这些概念，如果认真看完，我相信90%的同学可以彻底理解。

JS内存机制

JavaScript具有自动垃圾回收机制，周期性会检查没有使用的变量，进行回收释放。所以在闭包中，如果引用了外部的变量，则无法进行释放和回收，一般会传参进去。

垃圾回收：找出那些不再继续使用的变量，然后释放其占用的内存，垃圾收集器会按照固定的时间间隔周期性地执行这一操作。

在JS中，每一个数据都需要一个内存空间，内存空间又分为栈内存(stack)与堆内存(heap)。

栈内存一般储存基础数据类型

Number String Null Undefined Boolean Symbol

复制代码

看一个例子：

var num = 1

复制代码

我们定义一个变量num，系统自动分配存储空间。我们可以直接操作保存在栈内存空间的值，因此基础数据类型都是按值访问。

数据在栈内存中的存储与使用方式类似于数据结构中的堆栈数据结构，遵循后进先出的原则。

堆内存一般储存引用数据类型

var user = { name:'jack' }

var arr = [1,3,5]

复制代码

JS的引用数据类型，比如数组Array，它们值的大小是不固定的。引用数据类型的值是保存在堆内存中的对象。JavaScript不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。

通过下面这张图，我们就能直观理解。

var num = 1; // 栈

var name = '前端未来'; // 栈

// 变量user存在于栈中，{name:'河畔'}存在于堆内存中

var user = { name: '河畔' };

// 变量arr存在于栈中，[1, 2, 3] 作为对象存在于堆内存中

var arr = [1, 3, 5];复制代码

因此当我们要访问堆内存中的引用数据类型时，实际上我们首先是从栈中获取了该对象的指针，然后再从堆内存中取得我们需要的数据。

所以，我们经常说：基本类型赋值相互不影响，引用类型赋值，会影响原对象。

一个例子就能看明白：

var a = 20;

var b = a;

b = 30;

// a为20，b为30，值类型不影响

console.log(a)

var user = { name: '河畔' };

var info = user;

info.name = 'Jack'

// 打印为jack，指向同一个内存地址

console.log(user.name)复制代码

总结：

JavaScript具备自动垃圾回收机制

JS内存分为堆内存和栈内存

引用类型在栈中保存指针，在堆中保存对象值

栈内存数据遵循

先进后出

EventLoop

现在前端面试，大家都喜欢问EventLoop，但说实话，很多人看了无数篇文章，还是稀里糊涂，今天依然通过代码+图片的方式给大家演示效果。

为了更好的理解事件机制，我们需要先介绍执行栈。所有JS代码运行都是被放入执行中执行的，遵循进栈和出栈，直到栈被清空。

执行栈

JS 代码在运行前都会创建执行上下文，也可以理解为执行环境，JS 中有三种执行上下文：

全局执行上下文，默认的，在浏览器中是 window 对象

函数执行上下文，JS 的函数每当被调用时会创建一个上下文。

Eval 执行上下文，eval 函数会产生自己的上下文。

通常，我们的代码中都不止一个上下文，那这些上下文的执行顺序应该是怎样的？从上往下依次执行？

栈，是一种数据结构，遵循先进后出的原则。JS 中的执行栈就具有这样的结构，当引擎第一次遇到 JS 代码时，会产生一个全局执行上下文并压入执行栈，每遇到一个函数调用，就会往栈中压入一个新的上下文。引擎执行栈顶的函数，执行完毕，弹出当前执行上下文。

接下来，我们看一个例子：

function foo(){

console.log('1');

bar();

console.log('3');

}

function bar(){

console.log('2');

}

foo();

复制代码

这个毫无疑问，大家都知道答案，执行栈是怎么调用的？

首先执行这个JS文件，创建一个全局上下文，并压入执行栈中，当 foo() 函数被调用时，将 foo 函数的执行上下文压入执行栈，接着执行输出 ‘1’；当 bar() 函数被调用，将 bar 函数的执行上下文压入执行栈，接着执行输出 ‘2’；bar() 执行完毕，被弹出执行栈，foo() 函数接着执行，输出 ‘3’；foo() 函数执行完毕，被弹出执行栈，最后清空整个执行栈。这就是先进后出，Foo先被压入执行栈，最后才被弹出执行栈

EC就是Execute Context执行上下文

总结：

所有JS代码运行，都需要放入执行栈中.

执行上下文包含了三种(全局、函数、eval)

栈是一种数据结构，遵循

先进后出

接下来，看一道经典面试题

console.log(1)

new Promise(function(resolve){

console.log(3)

resolve(100)

}).then(function(data){