javascript执行上下文、作用域与闭包(第四篇)---作用域与执行上下文

2017-10-15 12:46:13来源:CSDN作者:IamChuancey人点击

分享

上一篇我们讲了作用域,也留了一个问题,我们是真的在作用域里取到变量的值吗?

在上一篇里也给出了答案,我们不是在作用域里取到变量的值,而是在作用域所对应的执行上下文取到变量的值,并且可能同样的作用域,相同的变量取到的值是不同的。

下面我们将详细介绍。

这里写图片描述

在这里,仍旧提一句很重要的话,作用域在函数创建的时就已经确定了,而不是在函数调用时确定

下面我们将按照程序执行的顺序,一步一步把各个上下文环境加上。

第一步,在加载程序时,已经确定了全局上下文环境,并随着程序的执行而对变量就行赋值,
这里写图片描述

在这里提一句,函数的执行上下文是在调用函数后建立的,执行上下文的第一阶段(准备阶段)是在调用函数后,执行具体代码前进行,执行上下文的第二阶段(执行阶段)是执行具体代码时进行的。

第二步,程序执行到第27行,调用fn(10),此时生成此次调用fn函数时的上下文环境,压栈,并将此上下文环境设置为活动状态
这里写图片描述

第三步,执行到第23行时,调用bar(100),生成此次调用的上下文环境,压栈,并设置为活动状态
这里写图片描述

第四步,执行完第23行,bar(100)调用完成。则bar(100)上下文环境被销毁。接着执行第24行,调用bar(200),则又生成bar(200)的上下文环境,压栈,设置为活动状态。
这里写图片描述

第五步,执行完第24行,则bar(200)调用结束,其上下文环境被销毁。此时会回到fn(10)上下文环境,变为活动状态
这里写图片描述

第六步,执行完第27行代码,fn(10)执行完成之后,fn(10)上下文环境被销毁,全局上下文环境又回到活动状态
这里写图片描述

所有过程到此结束。

最后,我们可以把以上这几个图片连接起来看看

这里写图片描述

我们可以看出,作用域只是一个“区域”,一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。

所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。

如果想检验自己对以上的概念是否掌握清楚,可以试一下下面的例子,如果能理解其结果,那么说明你已经掌握了。

function a(){var age=21;var height=178;var weight=70;function b(){    alert(age);//undefined    alert(height);//178    var age=25;    height=180;   //相当于是在全局作用域里声明了height变量。    alert(age);//25    alert(height); //180      }      b();}a(); //备注:如果在函数作用域内声明变量不加var,相当于是在全局作用域里声明了这个变量。

这里需要把这一篇连同前三篇的内容都看懂才能理解上面例子的结果。如果有疑问,我会在下一篇拿一整个篇幅讲一下我的理解。


下一篇: javascript执行上下文、作用域与闭包(第五篇)—一个例子的理解

本文参考了王福朋老师的深入理解javascript原型和闭包(13)

微信扫一扫

第七城市微信公众平台