图解JS执行上下文
当前位置:知识管理交流
→『 技术文档交流 』
执行上下文是什么?执行上下文是一个抽象的概念,用于描述代码执行时的环境,包含了当前代码运行时所需的变量、函数和参数。 从一段JS的执行谈起单看概念可能还有点懵,其实执行上下文“诞生”的时机是JS代码编译的时候,“被操作”的时机是JS代码执行的时候。 什么样的JS代码会被编译产生执行上下文呢?一般来说,有三种情况:
以这段代码为例:
这段代码很简单,先是创建了一个 add 函数,接着在代码的最下面又调用了该函数。 那么下面我们就利用图片来解释下函数调用的过程。 在执行到函数 add() 之前,JavaScript 引擎会为上面这段代码创建全局执行上下文,包含了声明的函数和变量,你可以参考下图: 从图中可以看出,代码中全局变量和函数都保存在全局上下文的变量环境中。 执行上下文准备好之后,便开始执行全局代码,当执行到 add 这儿时,JavaScript 判断这是一个函数调用,那么将执行以下操作:
完整流程你可以参考下图: 就这样,当执行到 add 函数的时候,我们就有了两个执行上下文了——全局执行上下文和 add 函数的执行上下文。 也就是说在执行 JavaScript 时,可能会存在多个执行上下文,那么 JavaScript 引擎是如何管理这些执行上下文的呢? 答案是通过一种叫栈的数据结构来管理的。那什么是栈呢?它又是如何管理这些执行上下文呢? 什么是栈关于栈,你可以结合这么一个贴切的例子来理解,一条单车道的单行线,一端被堵住了,而另一端入口处没有任何提示信息,堵住之后就只能后进去的车子先出来,这时这个堵住的单行线就可以被看作是一个栈容器,车子开进单行线的操作叫做入栈,车子倒出去的操作叫做出栈。 在车流量较大的场景中,就会发生反复的入栈、栈满、出栈、空栈和再次入栈,一直循环。 所以,栈就是类似于一端被堵住的单行线,车子类似于栈中的元素,栈中的元素满足后进先出的特点。 你可以参考下图: 什么是 JavaScript 的调用栈JavaScript 引擎正是利用栈的这种结构来管理执行上下文的。在执行上下文创建好后,JavaScript 引擎会将执行上下文压入栈中,通常把这种用来管理执行上下文的栈称为执行上下文栈,又称调用栈。 为便于你更好地理解调用栈,下面我们再来看段稍微复杂点的示例代码:
在上面这段代码中,你可以看到它是在 addAll 函数中调用了 add 函数,那在整个代码的执行过程中,调用栈是怎么变化的呢? 下面我们就一步步地分析在代码的执行过程中,调用栈的状态变化情况。 第一步,创建全局上下文,并将其压入栈底。如下图所示: 从图中你也可以看出,变量 a、函数 add 和 addAll 都保存到了全局上下文的变量环境对象中。全局执行上下文压入到调用栈后,JavaScript 引擎便开始执行全局代码了。首先会执行 a=2 的赋值操作,执行该语句会将全局上下文变量环境中 a 的值设置为 2。设置后的全局上下文的状态如下图所示: 接下来,第二步是调用 addAll 函数。当调用该函数时,JavaScript 引擎会编译该函数,并为其创建一个执行上下文,最后还将该函数的执行上下文压入栈中,如下图所示: addAll 函数的执行上下文创建好之后,便进入了函数代码的执行阶段了,这里先执行的是 d=10 的赋值操作,执行语句会将 addAll 函数执行上下文中的 d 由 undefined 变成了 10。 然后接着往下执行,第三步,当执行到 add 函数调用语句时,同样会为其创建执行上下文,并将其压入调用栈,如下图所示: 当 add 函数返回时,该函数的执行上下文就会从栈顶弹出,并将 result 的值设置为 add 函数的返回值,也就是 9。如下图所示: 紧接着 addAll 执行最后一个相加操作后并返回,addAll 的执行上下文也会从栈顶部弹出,此时调用栈中就只剩下全局上下文了。最终如下图所示: 至此,整个 JavaScript 流程执行结束了。 总结
参考资料:《浏览器工作原理与实践》
该文章在 2024/7/24 16:36:34 编辑过 |
关键字查询
相关文章
正在查询... |