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

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

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

第二步:程序执行到第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——作用域和上下文环境的更多相关文章

  1. 理解JavaScript中的作用域和上下文

    JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScrip ...

  2. 深入理解JavaScript中的作用域和上下文

    介绍 JavaScript中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域.理解作用域将使你的代码脱颖而出,减 ...

  3. 认识javascript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...

  4. js作用域与执行环境(前端基础系列)

    一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...

  5. JS 作用域(执行环境)与作用链---JS 学习笔记(二)

    一  作用域(执行环境) 作用域:定义了变量和函数有权访问的其他数据,决定了他们各自的行为.--------<JS高级程序设计>4.2 好难理解啊~参考了参考尤克希的博客内容,大体上理解了 ...

  6. 06慕课网《进击Node.js基础(一)》作用域和上下文

    作用域 function(){}大括号中的内容是一个作用域; function 和 var 的声明会被提到作用域的最上面 function f(){ a = 2; var b = g(); //此处可 ...

  7. 深入理解js——作用域

    "javaScript没有块级作用域",所谓"块",就是{}中间的内容.所以在声明变量的时候不要在"块"里面,要在一开始声明就好了. 其实j ...

  8. 初步理解js作用域

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【学习笔记】深入理解js原型和闭包(18)——补充:上下文环境和作用域的关系

    本系列用了大量的篇幅讲解了上下文环境和作用域,有些人反映这两个是一回儿事.本文就用一个小例子来说明一下,作用域和上下文环境绝对不是一回事儿. 再说明之前,咱们先用简单的语言来概括一下这两个的区别. 0 ...

随机推荐

  1. 通病问题:错误如for architecture arm64: "_OBJC_CLASS_$_CBUUID", referenced from: objc-class-ref in BluetoothLinkOperation.o 类似的问题解决办法

    仔细检查 是否1.相关工程文件未导入2.framework文件未导入3.文件路径缺失 http://www.jianshu.com/p/06ce3a50fa19

  2. 利用nodejs搭建服务器,测试AJAX

    最近学习了AJAX一直没有进行过测试,前今天了解了Noejs搭建本地服务器下就尝试了一下.通过AJAX请求的方式获取HTTP服务器返回数据的代码 首先创建一个serve.js的文件.并写入以下代码. ...

  3. Xcode 7 调试野指针利器 Address sanitizer

    Xcode 7 调试野指针利器 Address sanitizer 什么是Address Sanitizer? AddressSanitizer is a fast memory error dete ...

  4. CM给hive添加自定义jar包

    使用的是cloudera manager管理的集群: hive添加自定义jar包 服务端:高级:Hive 辅助 JAR 目录 设置的的路径是影响所有服务端的设置,比如hue中使用到了hive查询编辑器 ...

  5. (2016 年) githup 博客地址 : https://github.com/JMWY/MyBlog

    githup 博客地址 : https://github.com/JMWY/MyBlog

  6. 转 nutch网页快照乱码解决方法

    修改apache-tomcat-7.0.55\webapps\nutch-1.2下的cached.jsp 将content = new String(bean.getContent(details)) ...

  7. Java面向对象㈡ -- 继承与多态

    Java的继承是通过extends和implement来实现的,Java不支持多继承,但是Java支持多层继承以及多实现(接口).Java继承有一个关键字super是用来指向父类.Java继承衍生出覆 ...

  8. C#设计模式——解释器模式(Interpreter Pattern)

    一.概述 在软件开发特别是DSL开发中常常需要使用一些相对较复杂的业务语言,如果业务语言使用频率足够高,且使用普通的编程模式来实现会导致非常复杂的变化,那么就可以考虑使用解释器模式构建一个解释器对复杂 ...

  9. Java:国际化

    Java的国际化: 资源文件的命名可以有如下三种形式:baseName _ language _country.properties baseName _language.properties bas ...

  10. CodeBlocks安装及配置注意事项

    在使用codeblocks的时候,网上一般只会提供CodeBlocks的项目文件,并不包括编译器和调试器,要使用CodeBlocks的完整功能需要在官网下载完整版. 如图可下载mingw版本. 进入C ...