【学习笔记】深入理解js原型和闭包（13）——【作用域】和【上下文环境】

上文简单介绍了作用域，本文把作用域和上下文环境结合起来说一下，会理解的更深一些。

如上图，我们在上文中已经介绍了，除了全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时确定。

下面我们将按照程序执行的顺序，一步一步把各个上下文环境加上。另外，对上下文环境不了解的朋友，可以去看看之前的两篇文章：

https://www.cnblogs.com/lauzhishuai/p/10078231.html

https://www.cnblogs.com/lauzhishuai/p/10078259.html

第一步，在加载程序时，已经确定了全局上下文环境，并随着程序的执行而对变量就行赋值。

第二步，程序执行到第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)上下文环境被销毁，全局上下文环境又回到活动状态。

结束了。像老太太的裹脚布——又臭又长！

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

连接起来看，还是挺有意思的。作用域只是一个“地盘”，一个抽象的概念，其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。所以，作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。

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

虽然本文很长，但是文字较少，图片居多，图片都有形象的展示，大家花十几分钟也能慢慢看完。但是，这节内容真的很重要。

以上代码中，咱们还没有设计到跨作用域取值的情况，即——自由变量。详细内容且听下回分解。

---------------------------------------------------------------------------

本文已更新到《深入理解js原型和闭包》的目录更多内容可参考《深入理解js原型和闭包》

转载于:https://www.cnblogs.com/lauzhishuai/p/10078365.html

【学习笔记】深入理解js原型和闭包（13）——【作用域】和【上下文环境】相关推荐

【学习笔记】深入理解js原型和闭包（5）——instanceof
又介绍一个老朋友--instanceof. 对于值类型,你可以通过typeof判断,string/number/boolean都很清楚,但是typeof在判断到引用类型的时候,返回值只有object/ ...
【学习笔记】深入理解js原型和闭包（11）——执行上下文栈
继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...
【学习笔记】深入理解js原型和闭包（9）—— 简述【执行上下文】下
继续上一篇文章(https://www.cnblogs.com/lauzhishuai/p/10078231.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: 变 ...
深入理解javascript原型和闭包（15）——闭包
前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于"闭包"这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知 ...
深入理解javascript原型和闭包（16）——完结
之前一共用15篇文章,把javascript的原型和闭包. 首先,javascript本来就"不容易学".不是说它有多难,而是学习它的人,往往都是在学会了其他语言之后,又学java ...
简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
深入理解javascript原型和闭包（17）——补this
本文对<深入理解javascript原型和闭包(10)--this>一篇进行补充,原文链接:http://www.cnblogs.com/wangfupeng1988/p/3988422. ...
深入理解javascript原型和闭包（3）——prototype原型
既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
深入理解javascript原型和闭包（9）——简述【执行上下文】下
继续上一篇文章的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: 变量.函数表达式--变量声明,默认赋值为undefined: this--赋值: 函数声明--赋值: 如果在 ...

【学习笔记】深入理解js原型和闭包（13）——【作用域】和【上下文环境】

【学习笔记】深入理解js原型和闭包（13）——【作用域】和【上下文环境】相关推荐

最新文章

热门文章