分享-结合demo讲解JS引擎工作原理
代码如下:
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引擎在进入一段可执行代码时,要完成以下三个初始化工作:
- 创建一个全局对象
- 构建一个执行环境栈,与此同时创建一个全局执行环境并压入执行环境栈中
- 创建一个与全局执行环境相关的变量对象,此变量对象不仅包含全局对象中的所有属性,还包含全局定义的变量x和函数A。
阶段二:执行函数A
当执行函数A(1)时,js引擎要完成以下三个工作:
- 创建函数A的执行环境,并将A的执行环境推入执行环境栈顶并获取执行权限。
- 创建函数A的作用域链,js中每个函数执行时都会创建自己的执行环境,每个执行环境都有自己的作用域链,当执行环境被创建时,其作用域链初始化为当前函数的scope所包含的对象,即当前函数的作用域对象,而函数的scope是在函数定义时确定的,初始化为函数定义时所处环境的变量对象。
- 创建函数A执行环境的变量对象(也叫活动对象),此对象包含函数的形参、arguments对象、this对象以及内部变量和内部函数的定义,然后将此变量对象推入函数A作用域链顶端。
阶段三:执行函数B
函数A被执行以后,返回了B的引用,并赋值给了变量C,执行 C(1) 就相当于执行B(1),JS引擎需要完成以下工作:
- 创建函数B的执行环境,并将B的执行环境推入执行环境栈顶并获取执行权限。(注意:当函数A返回后,A的执行环境就会从栈中被删除,只留下全局执行环境)
- 创建函数B的作用域链,函数B是在函数A中定义的,函数B的作用域链初始化为执行环境A的变量对象。
- 创建函数B执行环境的变量对象(活动对象),并将此变量对象推入函数B作用域链的顶端。
当函数B执行“x+y+z”时,需要对x、y、z 三个标识符进行一一解析,解析过程遵守变量查找规则:先查找自己的变量对象(活动对象)中是否存在该属性,如果存在,则停止查找并返回;如果不存在,继续沿着其作用域链从顶端依次查找,直到找到为止,如果整个作用域链上都未找到该变量,则返回“undefined”。
函数B的作用域链为:
B的变量对象----->A的变量对象----->全局变量对象
因此,变量x会在A的变量对象中找到,y也会在A的变量对象中找到,z在自己的变量对象中找到 ,结果为2+ 1+ 1 = 4;
总结:
- 函数的scope是在定义时确定的。
- 函数的作用域链是在执行时确定的。
- 函数执行时首先会创建执行环境,然后创建函数的作用域链,接着创建函数的活动对象。
参考博客地址:http://www.cnblogs.com/onepixel/p/5090799.html(强烈推荐)
分享-结合demo讲解JS引擎工作原理的更多相关文章
- 探索JS引擎工作原理
JavaScript 从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习 JS 引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用 ...
- 探索JS引擎工作原理 (转)
这篇文章从相对底层的角度介绍了js引擎的工作 引入了 静态作用域 执行环境上下文(context) 等概念 , http://www.cnblogs.com/onepixel/p/5090799.ht ...
- javascript引擎工作原理
1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...
- 浅谈dedecms模板引擎工作原理及其自定义标签
浅谈dedecms模板引擎工作原理: 理解织梦模板引擎有什么意思? 可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步. 理解织梦会使我们写PHP代码是更顺手,同时能学 ...
- Tomcat中JSP引擎工作原理
http://blog.csdn.net/linjiaxingqqqq/article/details/7164449 JSP运行环境: 执行JSP代码需要在服务器上安装JSP引擎,比较常见的引擎有W ...
- 博客SEO-搜索引擎工作原理简介
资源推荐 Zac出版的<SEO实战密码>是SEO入门的好书,可惜我在当当网买的电子书受DRM版权保护,无法与大家分享. 我在网上找到了此书的 了解搜索引擎 章节,非常详细,且容易理解. ...
- (转)浅谈dedecms模板引擎工作原理及自定义标签
理解织梦模板引擎有什么意义?一方面可以更好地自定义标签.更多在于了解织梦系统,理解模板引擎是理解织梦工作原理的第一步.理解织梦会使我们写php代码时更顺手,同时能学习一些php代码的组织方式. 这似乎 ...
- node.js基本工作原理及流程
概述 Node.js是什么 Node 是一个服务器端 JavaScript 解释器,用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非 ...
- js的工作原理
JavaScript就是所谓的客户端脚本语言,是一种在互联网浏览器(浏览器也称为Web客户端,因为它连接到Web服务器上,以下载页面)内部运行的计算机编程语言. 也就是说,如果一个网页里有js代码,那 ...
随机推荐
- [C#]System.Timers.Timer(2)
摘要 之前学习过c#中定时器Timer的基本用法,在使用过程中,有一个问题,一直困扰着自己,就是在初始化定时器的时候,如果设置的interval过小,或者每次执行的业务非常耗时的时候,这时候该怎么处理 ...
- Oracle简介及安装
一.轨迹 二.Oracle简介 Oracle是现在全世界最大的数据库提供商,编程语言提供商,应用软件提供商,它的地位等价于微软的地位. Oracle在古希腊神话中被称为“神谕”,指的是上帝的宠儿,在中 ...
- SqlServer 使用sys.dm_tran_locks处理死锁问题
1.模拟资源锁定 --开始事务BEGIN TRANSACTION--更新数据update Table_1 set FuncName=FuncName--等待1分钟WAITFOR DELAY '01:0 ...
- [日常] Go语言圣经--浮点数习题
练习 3.1: 如果f函数返回的是无限制的float64值,那么SVG文件可能输出无效的多边形元素(虽然许多SVG渲染器会妥善处理这类问题).修改程序跳过无效的多边形. 练习 3.2: 试验math包 ...
- Linux CentOS Nginx安装配置
Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. ...
- 模版方法模式(Template Method)
1.概念 在模板模式(Template Pattern)中,一个抽象类公开定义了执行它的方法的方式/模板.它的子类可以按需要重写方法实现,但调用将以抽象类中定义的方式进行.这种类型的设计模式属于行为型 ...
- 【读书笔记】iOS-自动布局
自动布局是一项强大的功能,它允许开发者创建一个单一的用户界面,它会自动调整屏幕大小,方向和本地化,Xcode5中的编辑界面的自动布局功能已经大大增强了.当约束缺失或错误配置时,界面生成器可以修复布局. ...
- CSS编辑元素的浮动
1.元素浮动: 1)使用 float:left; 这样的格式设置元素的浮动方式,属性值可以是left,right: 2)元素设置为左浮动时,元素将从原区域浮动到浏览器的左侧页面:右浮动时,就会附在右侧 ...
- Android studio Connection failed (dl.google.com)
公司的网,莫名其妙的不能更新了,却可以下载compile文件... 于是乎FQ,hosts,修改studio.exe.vmoptions文件 然并卵,都特么不行 搞了一天还是不行 这种问题或许可以找到 ...
- Git删除文件
Git基础 Git有三大区(工作区.暂存区.版本库),文件有三个状态(untracked.unstaged.uncommited). (1)打开项目文件夹,除了隐藏的.git文件夹,其他项目文件位于的 ...