先随便放张图
我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题。比如先来一个简单一点的。
console.log(a); // 这里会打印出什么？
vara = 20;
暂时先不管这个例子，我们先引入一个JavaScript中最基础，但同时也是最重要的一个概念执行上下文（Execution Context）。
每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。
因此在一个JavaScript程序中，必定会产生多个执行上下文，在我的上一篇文章中也有提到，JavaScript引擎会以堆栈的方式来处理它们，这个堆栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前正在执行的上下文。
当代码在执行过程中，遇到以上三种情况，都会生成一个执行上下文，放入栈中，而处于栈顶的上下文执行完毕之后，就会自动出栈。为了更加清晰的理解这个过程，根据下面的例子，结合图示给大家展示。
varcolor = ‘blue’;
functionchangeColor(){
varanotherColor = ‘red’;
functionswapColors(){
vartempColor = anotherColor;
anotherColor = color;
color = tempColor;
swapColors();
changeColor();
我们用ECStack来表示处理执行上下文组的堆栈。我们很容易知道，第一步，首先是全局上下文入栈。
第一步：全局上下文入栈
全局上下文入栈之后，其中的可执行代码开始执行，直到遇到了changeColor()，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。
第二步：changeColor的执行上下文入栈
changeColor的上下文入栈之后，控制器开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。
第三步：swapColors的执行上下文入栈
在swapColors的可执行代码中，再没有遇到其他能生成执行上下文的情况，因此这段代码顺利执行完毕，swapColors的上下文从栈中弹出。
第四步：swapColors的执行上下文出栈
swapColors的执行上下文弹出之后，继续执行changeColor的可执行代码，也没有再遇到其他执行上下文，顺利执行完毕之后弹出。这样，ECStack中就只身下全局上下文了。
第五步：changeColor的执行上下文出栈
全局上下文在浏览器窗口关闭后出栈。
注意：函数中，遇到return能直接终止可执行代码的执行，因此会直接将当前上下文弹出栈。
整个过程
详细了解了这个过程之后，我们就可以对执行上下文总结一些结论了。
为了巩固一下执行上下文的理解，我们再来绘制一个例子的演变过程，这是一个简单的闭包例子。
functionf1(){
varn=999;
functionf2(){
alert(n);
returnf2;
varresult=f1();
result();// 999
因为f1中的函数f2在f1的可执行代码中创业项目，并没有被调用执行，因此执行f1时，f2不会创建新的上下文执行上下文执行上下文，而直到result执行时，才创建了一个新的。具体演变过程如下。
上例演变过程
您有可能会对下面的文章感兴趣
限时特惠本站每日持续更新海量各大内部创业教程，年会员只要98元，全站资源免费下载
点击查看详情
站长微信：9200327
