研究JS运行机制之重新认识JavaScript(1) ———— 认识Js执行上下文与执行机制

关于这个系列

  javascript语言有很多奥秘，譬如其运行机制，内部原理，在历史的这一段日子里，它不仅带来了复杂的交互效果和充分的性能效益，而且吸引了越来越多的开发者加入其中，但是随着时间进程的发展，很多时候开发者们因为花样繁复的JS库与框架而忽略了JS本身的内部机制。无可厚非，这样做是增加了效率，但是随着Web的蓬勃发展和JS社区的踊跃贡献，JS的思想和创造年年翻新，现有的一切被淘汰也是时间的问题。所以开发者花费时间去研究其语言的内部机制是一个不被社会洪流淘汰的最佳选择，而本系列恰好记录了本人对于JS的理解和思考，会陆续将所学更新于此，希望对大家有所帮助。

  受水平和技术有限，灵感和部分例子来自于Github里《JavaScript开发者应懂的33个概念》系列集合，有兴趣的可以在github里面找到这个合集查看完整的讲解。

执行上下文

  这是一个很难具体阐述的概念，而且绕口的文字也让很多人费解，我也很难阐述他究竟是个什么东西，为什么取了个这样的名字，但是我认为执行上下文就是javascript所运行的整个环境，它将整个js文件的一些段落或某一个段落包裹起来，分别执行，可以把它理解为某一段代码是在怎么样的一个地方去执行的，如果感觉非常费解，其实你可以把整个js文件比喻成一个房屋，房屋里面拥有着不同的居住环境，不信你可以看看执行上下文的种类在房屋内充当了什么样的位置：

  1.全局执行上下文

全局执行上下文就是属于最外层的上下文，简单的说就是除了函数里面的上下文，初始化全局执行上下文的时候它会做两件事情，会创建一个window对象，并且把this指向window对象，整个全局环境都属于全局执行上下文的环境，怎么去理解呢？想象一下刚刚上面我所说的房屋，对于整个JS文件而言他就是整个房屋，而全局执行上下文就好像人所能够移动的区域，客厅，厨房和饭厅就像一段段代码，我们的浏览器或者node环境也就是查房员，他负责查房后汇报房间里拥有什么东西，直到从门口开始把每一个房间都走完。

  2.函数执行上下文

函数执行上下文就是全局执行上下文所不能执行的地方，它往往存在与函数内部，全局在遇到这种环境时会避开它，就好像房间里的鱼缸，鸟窝，它们都是鱼和鸟活动的区域，在调用整个函数时，查房人就会往里面放上相应的动物，直到它们把整个环境走完以后再取出来，这些动物不仅有自己的语言，行为和动作，而鸟笼，鱼缸，狗窝它们大小也不一，当关上门时它们的世界就和整个房屋隔绝了开来，我们称这一些地方叫做函数执行上下文。

  3.eval函数上下文

  eval函数会将一段字符串当做JS代码来执行，而它自己也有属于自己的上下文，这就好像一个便携帐篷，在需要的时候把它在房屋里面打开，拥有了属于自己内部的区域；

执行栈

  刚刚说了执行上下文的概念，但是不少人会注意到有一个缺陷，就是我们如何把鱼放入鱼缸，鸟放入鸟窝跑一个遍呢？或者说我鱼缸里面的虾窝，狗窝毛毯上的跳蚤窝又是怎么去查看的呢？其实这就引入了我们执行栈的概念；而管理员就是通过这个东西把它们放入对应的地方汇报信息的。

  要搞懂执行栈，首先要理解栈是一个什么东西，有人会说栈是一种基本数据结构，先入先出，但本人就经常把队列和栈搞混(可能比较愚笨),但是笨有笨的方法，我可以想象，我把栈看成是军队训练时要爬的人墙，每次要爬山墙的人都是最后一个进入人墙，但是确实最先一个离开人墙，执行栈也是一样，全局执行上下文就相当于栈的底部，而每次执行到某个函数，其内部的函数上下文就会跳到全局的身上，执行完成便翻过这道墙，当然函数上下文里面的函数执行也是一样，他会跳到上一个函数上下文上边，这就形成了一个FQ的机制直到整个墙翻完为止。

  对于常理来说，是这样，但是总有一些奇怪的人，想自己组成一个小团队，他们为了不影响别人，决定在大部队翻过墙以后再自己FQ，这些小团队有可能是一个人也有可能是几个人，而这就牵扯到了JS的异步

异步

  异步是一个特殊的概念，在javascript中，整个语言的执行是单线程的，就是一次只能够做一次事情，而一些特殊的事情为了不影响其他事情的执行他们选择等待，当其他事情执行结束时他再去执行自己，一切都是这么的规范和有理，和现实中的混乱相距甚远；

  而这一批有礼貌的事情是哪一些呢？

  1.setTimeout 2.promise 3.事件绑定 4.ajax 5.回调函数

  他们都很有礼貌，每次都会等到执行完成后再去执行自身，至少我之前是这么认为的；

  慢慢的和他们相处长了以后，我发现，有一些伪君子，他们虽然也在最后执行，但是他们会插到所有有礼貌的人最前面，也就是说，他们在所有异步的成员里面首先执行，而这就牵扯到了微任务和宏任务的问题了

  而微任务就是这一批伪君子，这使我不得不介绍一下他们：

  micro-task(微任务)：Promise，process.nextTick，Object.observe

  下面这张图是从掘金《这一次，彻底弄懂 JavaScript 执行机制》一文中copy所得，方便大家理解微任务和宏任务

  此文到这里就结束了，相信大家也初步理解了机制，很多东西需要代码才能辅助理解，代码我会在之后补上，先告一段落

 

转载于:https://www.cnblogs.com/yaomingjie/p/9881996.html