一段代码,带你理解js执行上下文的工作流程

2019-07-13 admin

原文链接,欢迎关注我的博客

我相信很多前端初学者一开始都会被执行上下文这个概念弄晕,或者说似懂非懂。对于工作两年的我来说,说来实在惭愧,虽然知道它大概是什么,但总觉得没有一个更为清晰的认识(无法把它的工作过程描述清楚),因此最近特意温习了一遍,写下了这篇文章

执行上下文

要说清它的大体工作流程,需要提前说明三个基本概念,分别是thread of exection(线程)variable envirnoment(变量环境)call Stack(调用栈),这些概念我们或多或少接触过,接下来我会通过一段示例代码,和一系列图片,进一步解释这三个概念在执行上下文的运作流程。

一段代码

const num = 2;

function addOne(input) {
  const output = input + 1;
  return output;
}

const result = addOne(2);

这段代码做了什么

在运行上面这些代码前,js 引擎做的第一件是就是创建一个global execution context,也就是全局执行上下文:

先看图中的黑色箭头,它表示线程thread的执行顺序,众所周知 js 是单线程的,它会一行行、从上往下去执行代码;而右边的global memory,它用于存储当前上下文中的数据,由于线程目前处于全局上下文环境,故加了个global的前缀。

在这段代码中,第一行我们声明了一个名为num的不可变变量,并赋值为4, 因此global memory中就会分配内存,存储这个变量:

接着继续,当线程执行到第二行时,问题就来了:我们创建了一个addOne的变量,并把一个函数赋值于它,那在global memory里,到底存的是个啥?为了解答这个问题,我特意打印了一下:

function addOne(input) {
  const output = input + 1;
  return output;
}
console.log(addOne);

看,我们竟然把函数里的内容完完整整打印出来了,很明显,它存的是一个函数内部的“文本信息”。

其实很容易理解,当执行第二行的时候,该函数并没有被调用,因此线程不会立刻解析里面的内容,而是把它内部的信息以“文本内容”的形式保存下来,当需要执行的时候,才去解析变量里的函数内容,这也很好地解析了为什么函数内的异常仅会在函数被调用时才抛出来。

因此这时global execution context长这样:

由于addOne里保存的是函数内容,目前对于线程而言它是未知的,因此我们这里特意用一个带有输入输出箭头的函数图标,代表它是一个未被解析的函数。

我们继续执行第三步:还是创建了一个变量result,但此时它被赋予undefined,因为线程暂时无法从addOne这个函数里获知它的返回值。

由于addOne函数被调用了,线程会从刚刚保存的addOne变量中取出内容,去解析、执行它。这时 js 就创建了一个新的执行上下文——local execution context,即当前的执行上下文,这是一个船新的上下文,因此我特意用一个新图片去描述它:

首先这个memory我加了个local前缀,表面当前存储的都是此上下文中的变量数据。无论是上述的global memory,亦或是现在、或未来的local memory,我们可以用一个更为专业的术语variable envirnoment去描述这种存储环境。

此外,这个黑箭头我特意画了个拐角,意味它是从全局上下文进来的,local memory首先会分配内存给变量input,它在调用时就被2赋值了,紧接着又创建了一个output标签并把计算结果3赋值给它。最后,当线程遇到离开上下文的标识——return,便离开上下文,并把ouput的结果一并返回出去。

此时,这个上下文就没用了(被执行完了),于是乎垃圾回收便盯上了它,选择一个恰当的时机把里面的local memory删光光。

这时候有同学会问道:你这个只是普通场景,那闭包怎么解释呢?

其实闭包是个比较大的话题,这里也可以简单描述下:return的是一个函数的话,它返回的不仅是函数本身,还会把local memory中被引用的变量作为此函数的附加属性一并返回出去,这就好比印鱼喜欢吸附在鲨鱼身上一般,鳝鱼无论去哪都带着它,因此,无论这个函数在哪里被调用,它都能在它本身附带的local memory中找到那个变量。如果你把返回的函数console.log出来,也是能够找到它的,这里就不详说,关于闭包的更多概念(包括在函数式编程中的使用),有兴趣的童鞋可以看看这篇文章:Partial & Curry - 函数式编程

go on,回到了global execution contextresult不再孤零零地undefined,而是拿到了可爱的3:

到这里,我们的线程就完成了所有工作,可以歇息了,等等…好像漏了什么没讲…对,就是Call Stack

刚刚我们全篇在讲解thread of exection多么努力地一行行解析执行代码,variable envirnoment多么勤快地存储变量,那call stack干了什么?是在偷懒吗?

其实并不是,call stack起到了非常关键的作用:有了它,线程随时可以知道自己目前处于哪个上下文。

试想一下,我们在写代码的过程中往往喜欢在各种函数内穿插着各种子函数,比如递归,因此勤劳的线程就得不断地进入上下文、退出上下文、再进入、再进入、再退出、再进入,久而久之线程根本就不知道自己处于哪个上下文中,也不知道应该在哪个memory中取数据,全都乱套了,因此必须通过一种方式去跟踪、记录目前线程所处的环境。

call stack就是一种数据结构,用于“存储”上下文,通过不断推入push、推出pop上下文的方式,跟踪线程目前所处的环境——线程无需刻意记住自己身处何方,只要永远处于最顶层执行上下文,就是当前函数执行的正确位置

程序一开始运行的时候,call stack先会pushglobal execution context: 接着我们在上述代码第三行调用了addOnecall stack立刻将addOne的上下文push进去,待执行到return标识后,再pop出来:

同样的,即使在复杂的情况,只要遵循pushpop以及时刻处于最顶层上下文的原则,线程就可以一直保持在正确的位置上:

值得一提的是,call stack层数是有上限的,因此稍加不注意,你写的递归可能会造成栈溢出了。

总结

简单来说,上下文就是个可以用于执行代码的环境,与它相关的有三个重要的概念:

  • thread of exection(执行线程) 它的主要职责是,从上到下,一行一行地解析和执行代码,不会同时多处执行,也就是我们常挂在嘴边的“js 是单线程的啦”
  • variable envirnoment(变量环境) 活跃的用于存储数据的内存
  • call stack(调用栈) 一种用于存储上下文,跟踪当前线程所属的上下文位置的数据结构

[转载]原文链接:https://segmentfault.com/a/1190000019752696

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69673.html

文章标题:一段代码,带你理解js执行上下文的工作流程

相关文章
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
回到顶部