深入理解javascript原型和闭包(13)-【作用域】和【上下文环境】
上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些。
如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时确定。
下面我们将按照程序执行的顺序,一步一步把各个上下文环境加上。另外,对上下文环境不了解的朋友,可以去看看之前的两篇文章:
http://www.cnblogs.com/wangfupeng1988/p/3986420.html
http://www.cnblogs.com/wangfupeng1988/p/3987563.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)上下文环境被销毁,全局上下文环境又回到活动状态。
结束了。像老太太的裹脚布——又臭又长!
最后我们可以把以上这几个图片连接起来看看。
连接起来看,还是挺有意思的。作用域只是一个“地盘”,一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了。
所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。
虽然本文很长,但是文字较少,图片居多,图片都有形象的展示,大家花十几分钟也能慢慢看完。但是,这节内容真的很重要。
以上代码中,咱们还没有设计到跨作用域取值的情况,即——自由变量。详细内容且听下回分解。
---------------------------------------------------------------------------
本文已更新到《深入理解javascript原型和闭包系列》的目录,更多内容可参见《深入理解javascript原型和闭包系列》。
另外,欢迎关注我的微博。
也欢迎关注我的其他教程:
《用grunt搭建自动化的web前端开发环境》《从设计到模式》《json2.js源码解读视频》《微软petshop4.0源码解读视频》
--------------------------------------------------------------------------
深入理解javascript原型和闭包(13)-【作用域】和【上下文环境】的更多相关文章
- 深入理解javascript原型和闭包(14)——从【自由变量】到【作用域链】
先解释一下什么是“自由变量”. 在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量.如下图 如上程序中,在调用fn()函数时,函数体中第6 ...
- 深入理解javascript原型和闭包(12)——简介【作用域】
提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...
- 深入理解javascript原型和闭包(18)——补充:上下文环境和作用域的关系
本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...
- 深入理解javascript原型和闭包 (转)
该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...
- 深入理解javascript原型和闭包系列
从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...
- 深入理解javascript原型和闭包(11)——执行上下文栈
继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...
- 深入理解javascript原型和闭包(完结)
原文链接:http://www.cnblogs.com/wangfupeng1988/p/3977924.html 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascr ...
- 深入理解javascript原型和闭包
目录: 深入理解javascript原型和闭包(1)——一切都是对象 深入理解javascript原型和闭包(2)——函数和对象的关系 深入理解javascript原型和闭包(3)——prototyp ...
- 深入理解javascript原型和闭包(转)
深入理解javascript原型和闭包(完结) 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的 ...
随机推荐
- android 关闭/开启软件键盘(hideSoftKeyboard)
/** * 隐藏软键盘 * @param v */ public static void hideSoftKeyboard(View v) { InputMethodManager imm = (In ...
- java md5
需求是,上传文件到HDFS,然后生成同名的MD5文件,基本示例如下: public static String getMD5(InputStream inputStream) { byte[] buf ...
- FineReport中如何进行Informix数据库连接
报表开发工具Finereport中,对于Informix数据库,定义数据连接处进行如下配置: 数据库:Others 驱动器:com.informix.jdbc.IfxDriver URL: jdbc: ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- P1774 最接近神的人_NOI导刊2010[树状数组 逆序对 离散化]
题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...
- CF724B. Batch Sort[枚举]
B. Batch Sort time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- NOIP2013pj车站分级[拓扑排序]
题目描述 一条单向的铁路线上,依次有编号为 1, 2, …, n 的 n 个火车站.每个火车站都有一个级 别,最低为 1 级.现有若干趟车次在这条线路上行驶,每一趟都满足如下要求:如果这趟车 次停靠了 ...
- 使用Memberane Moniter监控HTTP & SOAP requests
Memberane Moniter 使用方法见左侧Documentation 此工具可以监控到每一次发生在指定端口的http请求或者soap请求,如图所示. 但是个人认为仍然有几个问题: 1.不能真正 ...
- EventToCommand
EventToCommand 在WPF中,并不是所有控件都有Command,例如TextBox,那么当文本改变,我们需要处理一些逻辑,这些逻辑在ViewModel 中,没有Command如何绑定呢?这 ...
- 简单所以不要忽视,关于\r\n和\n程序员应了解的实际应用
众所周知,\r叫回车符,\n叫换行符. 由于历史原因,windows环境下的换行符是\r\n;(文章最后会稍微解释这个历史原因) linux和html等开源或公开标准中的换行符是\n. 记录这篇笔记的 ...