深入理解js——作用域和上下文环境

时间:2023-03-08 15:15:35
深入理解js——作用域和上下文环境

深入理解js——作用域和上下文环境

如图除全局作用域外,每个函数都会创建自己的作用域。作用域在函数定义时就确定了,而不是在函数调用时确定。

下面按照程序执行的步骤加上上下文环境。

第一步:程序加载时已经确定全局上下文环境,并随着程序的执行对变量进行赋值。

深入理解js——作用域和上下文环境

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

深入理解js——作用域和上下文环境

第三步:执行到第23行时,调用bar(100),生成此次调用的上下文环境,压栈,并设置为活动状态。

深入理解js——作用域和上下文环境

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

深入理解js——作用域和上下文环境

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

深入理解js——作用域和上下文环境深入理解js——作用域和上下文环境

第六步:执行完第27行代码,fn(10)执行完成之后,fn(10)上下文环境被销毁,全局上下文环境又回到活动状态。

深入理解js——作用域和上下文环境

把上面图片连起来看

深入理解js——作用域和上下文环境

作用域只是一个“地盘”,一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了。所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。