代码如下:

var x = 1;
function A(y){
var x = 2;
function B(z){
console.log(x+y+z);
}
return B;
}
var C = A(1);
C(1);

分析如下:

阶段一:全局初始化阶段

js引擎在进入一段可执行代码时,要完成以下三个初始化工作:

  1. 创建一个全局对象
  2. 构建一个执行环境栈,与此同时创建一个全局执行环境并压入执行环境栈中
  3. 创建一个与全局执行环境相关的变量对象,此变量对象不仅包含全局对象中的所有属性,还包含全局定义的变量x和函数A。

阶段二:执行函数A

当执行函数A(1)时,js引擎要完成以下三个工作:

  1. 创建函数A的执行环境,并将A的执行环境推入执行环境栈顶并获取执行权限。
  2. 创建函数A的作用域链,js中每个函数执行时都会创建自己的执行环境,每个执行环境都有自己的作用域链,当执行环境被创建时,其作用域链初始化为当前函数的scope所包含的对象,即当前函数的作用域对象,而函数的scope是在函数定义时确定的,初始化为函数定义时所处环境的变量对象。
  3. 创建函数A执行环境的变量对象(也叫活动对象),此对象包含函数的形参、arguments对象、this对象以及内部变量和内部函数的定义,然后将此变量对象推入函数A作用域链顶端。 

阶段三:执行函数B 

函数A被执行以后,返回了B的引用,并赋值给了变量C,执行 C(1) 就相当于执行B(1),JS引擎需要完成以下工作:

  1. 创建函数B的执行环境,并将B的执行环境推入执行环境栈顶并获取执行权限。(注意:当函数A返回后,A的执行环境就会从栈中被删除,只留下全局执行环境)
  2. 创建函数B的作用域链,函数B是在函数A中定义的,函数B的作用域链初始化为执行环境A的变量对象。
  3. 创建函数B执行环境的变量对象(活动对象),并将此变量对象推入函数B作用域链的顶端。

  当函数B执行“x+y+z”时,需要对x、y、z 三个标识符进行一一解析,解析过程遵守变量查找规则:先查找自己的变量对象(活动对象)中是否存在该属性,如果存在,则停止查找并返回;如果不存在,继续沿着其作用域链从顶端依次查找,直到找到为止,如果整个作用域链上都未找到该变量,则返回“undefined”。

函数B的作用域链为:

B的变量对象----->A的变量对象----->全局变量对象

因此,变量x会在A的变量对象中找到,y也会在A的变量对象中找到,z在自己的变量对象中找到 ,结果为2+ 1+ 1 = 4;

总结:

  1. 函数的scope是在定义时确定的。
  2. 函数的作用域链是在执行时确定的。
  3. 函数执行时首先会创建执行环境,然后创建函数的作用域链,接着创建函数的活动对象。          

参考博客地址:http://www.cnblogs.com/onepixel/p/5090799.html(强烈推荐)

分享-结合demo讲解JS引擎工作原理的更多相关文章

  1. 探索JS引擎工作原理

    JavaScript 从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习 JS 引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用 ...

  2. 探索JS引擎工作原理 (转)

    这篇文章从相对底层的角度介绍了js引擎的工作 引入了 静态作用域 执行环境上下文(context) 等概念 , http://www.cnblogs.com/onepixel/p/5090799.ht ...

  3. javascript引擎工作原理

    1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...

  4. 浅谈dedecms模板引擎工作原理及其自定义标签

    浅谈dedecms模板引擎工作原理: 理解织梦模板引擎有什么意思? 可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步. 理解织梦会使我们写PHP代码是更顺手,同时能学 ...

  5. Tomcat中JSP引擎工作原理

    http://blog.csdn.net/linjiaxingqqqq/article/details/7164449 JSP运行环境: 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有W ...

  6. 博客SEO-搜索引擎工作原理简介

    资源推荐 Zac出版的<SEO实战密码>是SEO入门的好书,可惜我在当当网买的电子书受DRM版权保护,无法与大家分享. 我在网上找到了此书的  了解搜索引擎  章节,非常详细,且容易理解. ...

  7. (转)浅谈dedecms模板引擎工作原理及自定义标签

    理解织梦模板引擎有什么意义?一方面可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步.理解织梦会使我们写php代码时更顺手,同时能学习一些php代码的组织方式. 这似乎 ...

  8. node.js基本工作原理及流程

    概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...

  9. js的工作原理

    JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言. 也就是说,如果一个网页里有js代码,那 ...

随机推荐

  1. ASP.NET MVC标记最新的发布新闻或文章

    开发的网站中,一些文章列表或新闻列表,需要在标题前放置一个小new.gif小图,标记为是最新的新闻或是文章.今天Insus.NET的练习,就是在asp.net mvc的应用程序中实现这样功能.计划使用 ...

  2. 为PartialView传递一个参数

    看这篇之前,得先了解这个<在MVC应用程序中动态加载PartialView>http://www.cnblogs.com/insus/p/3547985.html. 因为是从这篇重构而来. ...

  3. MVC应用程序JsonResult()的练习

    这次学习MVC应用程序,尝试使用jQuery的获取数据,并显示于视图上,关键技术还是javascript的一个子集Json.我们先去HomeController写一个方法JsonResult GetJ ...

  4. Spring源码分析:Bean加载流程概览及配置文件读取

    很多朋友可能想看Spring源码,但是不知道应当如何入手去看,这个可以理解:Java开发者通常从事的都是Java Web的工作,对于程序员来说,一个Web项目用到Spring,只是配置一下配置文件而已 ...

  5. IIS日志自动清理

    IIS在运行的过程中日志会不停地增长,若iis的网站被频繁的调用或不当的调用,则会产生很多日志.我在系统运维的时候曾出现过20G的系统盘,由于合作商开发的程序有问题,每几百微秒调用一次web服务,短期 ...

  6. IDEA Tomcat Web项目修改了代码,重新部署页面没改变

    今天被IDEA坑的不浅直接说一下问题: 这是html页面不管我怎么修改重启服务器在浏览器中还是一点都不变化,甚至把一些内容都删了都没有变化,target可执行文件是最新的没问题,找了点资料发现是浏览器 ...

  7. c# IEnumerable和IEnumerator枚举器

    一 : IEnumerable 公开枚举数,该枚举数支持在非泛型集合上进行简单迭代. IEnumerable是可以枚举的所有非泛型集合的基接口,IEnumerable包含单个方法GetEnumerat ...

  8. C++ auto 关键字的使用

    C++98 auto 早在C++98标准中就存在了auto关键字,那时的auto用于声明变量为自动变量,自动变量意为拥有自动的生命期,这是多余的,因为就算不使用auto声明,变量依旧拥有自动的生命期: ...

  9. JAVA设计模式详解(三)----------装饰者模式

    今天LZ带给大家的是装饰者模式,提起这个设计模式,LZ心里一阵激动,这是LZ学习JAVA以来接触的第一个设计模式,也许也是各位接触的第一个设计模式.记得当初老师在讲IO的时候就提到过它:“是你还有你, ...

  10. 微信小程序 折叠效果

    <view class='help'> <view class='help_item'> <view class='title' data-index='1' catch ...