深入理解javascript原型和闭包（8）——简述【执行上下文】

柔情只为你懂 2022-06-13 08:19 149阅读 0赞

# [深入理解javascript原型和闭包（8）——简述【执行上下文】上][javascript_8] #

什么是“执行上下文”（也叫做“执行上下文环境”）？暂且不下定义，先看一段代码：

![221743466231490.png][]

第一句报错，a未定义，很正常。第二句、第三句输出都是undefined，说明浏览器在执行console.log(a)时，已经知道了a是undefined，但却不知道a是10（第三句中）。

在一段js代码拿过来真正一句一句运行之前，浏览器已经做了一些“准备工作”，其中就包括对变量的声明，而不是赋值。变量赋值是在赋值语句执行的时候进行的。可用下图模拟：

![221744084828533.png][]

这是第一种情况。

下面还有。先来个简单的。

![221744319354566.png][]

有js开发经验的朋友应该都知道，你无论在哪个位置获取this，都是有值的。至于this的取值情况，比较复杂，会专门拿出一篇文章来讲解。

与第一种情况不同的是：第一种情况只是对变量进行声明（并没有赋值），而此种情况直接给this赋值。这也是“准备工作”情况要做的事情之一。

下面还有。。。第三种情况。

在第三种情况中，需要注意代码注释中的两个名词——“函数表达式”和“函数声明”。虽然两者都很常用，但是这两者在“准备工作”时，却是两种待遇。

![221745066078791.png][]

看以上代码。“函数声明”时我们看到了第二种情况的影子，而“函数表达式”时我们看到了第一种情况的影子。

没错。在“准备工作”中，对待函数表达式就像对待“ var a = 10 ”这样的变量一样，只是声明。而对待函数声明时，却把函数整个赋值了。

好了，“准备工作”介绍完毕。

我们总结一下，在“准备工作”中完成了哪些工作：

*  变量、函数表达式——变量声明，默认赋值为undefined；
 *  this——赋值；
 *  函数声明——赋值；

这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。

这里插一句题外话：通过以上三种情况，你可能会联想到网上的有些考js语法的题目/面试题。的确，几乎每个js语法题中都有这种题目出现。之前你遇到这种题目是不是靠背诵来解决？背过了，隔几天又忘记了。——任何问题，都要去追根溯源，要知道这个问题是真正出自哪一块知识点，要真正去理解。光靠背诵是没用的。

细心的朋友可能会发现，我们上面所有的例子都是在全局环境下执行的。

其实，javascript在执行一个代码段之前，都会进行这些“准备工作”来生成执行上下文。这个“代码段”其实分三种情况——全局代码，函数体，eval代码。

这里解释一下为什么代码段分为这三种。

所谓“代码段”就是一段文本形式的代码。

首先，全局代码是一种，这个应该没有非议，本来就是手写文本到<script>标签里面的。

![221746370927602.png][]

其次，eval代码接收的也是一段文本形式的代码。

![221747371078703.png][]

最后，函数体是代码段是因为函数在创建时，本质上是 new Function(…) 得来的，其中需要传入一个文本形式的参数作为函数体。

![221746583578531.png][]

这样解释应该能理解了。

最后，eval不常用，也不推荐大家用。

下一节我们介绍函数的情况，并一起总结一下执行上下文到底包含哪些内容。敬请期待。

# [深入理解javascript原型和闭包（9）——简述【执行上下文】下][javascript_9] #

继续上一篇文章（http://www.cnblogs.com/wangfupeng1988/p/3986420.html）的内容。

上一篇我们讲到在全局环境下的代码段中，执行上下文环境中有如何数据：

*  变量、函数表达式——变量声明，默认赋值为undefined；
 *  this——赋值；
 *  函数声明——赋值；

如果在函数中，除了以上数据之外，还会有其他数据。先看以下代码：

![230840377174282.png][]

以上代码展示了在函数体的语句执行之前，arguments变量和函数的参数都已经被赋值。从这里可以看出，函数每被调用一次，都会产生一个新的执行上下文环境。因为不同的调用可能就会有不同的参数。

另外一点不同在于，函数在定义的时候（不是调用的时候），就已经确定了函数体内部自由变量的作用域。至于“自由变量”和“作用域”是后面要专门拿出来讲述的重点，这里就先点到为止。用一个例子说明一下：

![230841277489133.png][]

好了，总结完了函数的附加内容，我们就此要全面总结一下上下文环境的数据内容。

全局代码的上下文环境数据内容为：

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">普通变量（包括函数表达式），</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">如： var a = 10;</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">声明（默认赋值为undefined）</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">函数声明，</p> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">如： function fn() { }</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">赋值</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">this</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">赋值</p> </td> 
  </tr> 
 </tbody> 
</table>

如果代码段是函数体，那么在此基础上需要附加：

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">参数</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">赋值</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">arguments</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">赋值</p> </td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">自由变量的取值作用域</p> </td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> <p style="margin:10px auto; padding-top:0px; padding-bottom:0px">赋值</p> </td> 
  </tr> 
 </tbody> 
</table>

给执行上下文环境下一个通俗的定义——在执行代码之前，把将要用到的所有的变量都事先拿出来，有的直接赋值了，有的先用undefined占个空。

了解了执行上下文环境中的数据信息，你就不用再去死记硬背那些可恶的面试题了。理解了就不用背诵！

讲完了上下文环境，又来了新的问题——在执行js代码时，会有数不清的函数调用次数，会产生许多个上下文环境。这么多上下文环境该如何管理，以及如何销毁而释放内存呢？下一节将通过“执行上下文栈”来解释这个问题。

不过别着急，在解释“执行上下文栈”之前，还需要把this说一下，this还是挺重要的。

说完this，接着说执行上下文栈。

[javascript_8]: http://www.cnblogs.com/wangfupeng1988/p/3986420.html
[221743466231490.png]: /images/20220613/1e43172113574aecb4f569bd0b3c8bb8.png
[221744084828533.png]: /images/20220613/018eb3bbe450442bae985b00423001e9.png
[221744319354566.png]: /images/20220613/eabc8f1b63e34d599a4d3daa8f994bae.png
[221745066078791.png]: /images/20220613/22f640bcb1fc4b78bacd4267596a122b.png
[221746370927602.png]: /images/20220613/7fcb3ea9d2414f61a5144ff1d2533b11.png
[221747371078703.png]: /images/20220613/e2014a30d764417b9ccbcd7df862feb4.png
[221746583578531.png]: /images/20220613/f979462432d94dc39ff10fb96604d8d0.png
[javascript_9]: http://www.cnblogs.com/wangfupeng1988/p/3987563.html
[230840377174282.png]: /images/20220613/b56732878b9b43ee8ec682b45f279986.png
[230841277489133.png]: /images/20220613/076977c3dccb46908291be39bc667407.png