理解Javascript_12_执行模型浅析


Posted in Javascript onOctober 18, 2010

简单的开始
简单的代码:

<script type="text/javascript" src="xxx.js"></script> 
<script type="text/javascript"> 
var i = 10; 
function say(msg){ 
alert(msg); 
} 
</script> 
<script type="text/javascript"> 
j=100; 
say("hello world"); 
</script>

上面代码段的运行顺序是:
step1. 读入第一个代码段 
step2. 做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5 
step3. 创建全局执行环境(对var变量和function定义做"预解析") 
step4. 执行代码段(调用函数、进入eval时,都会创建新的执行环境),有错则报错(比如变量未定义) 
step5. 如果还有下一个代码段,则读入下一个代码段,重复step2 
step6. 结束

对于step1中的'脚本段'指的是<script>... ...</script>标签中的内容,还包括外部引入的脚本文件,如<script src="xxx.js"></script>也被列是脚本段的范畴。那step2中的语法分析又是什么呢?简单的理解语法分析就是查看Javascript代码的语法结构是否正确。如:
<script type="text/javascript"> 
var a = 10; 
if(a>10{ 
alert('yes'); 
} 
</script>

很明显,代码无法通过语法分析,if这个条件语句的输写语法是错误的。step3和step4中的'执行环境'是指什么,全局执行环境和调用函数创建的执行环境有什么区别?执行环境内部又有哪些处理?... ...

注:下面的部分内容为原来《javascript提速_01_引用变量优化》一文中的前两节的完整版本。

关于执行环境(Execution Context)
所有 JavaScript 代码都是在一个执行环境中被执行的。它是一个概念,一种机制,用来完成JavaScript运行时作用域、生存期等方面的处理。

可执行的JavaScript代码分三种类型:
1. Global Code,即全局的、不在任何函数里面的代码,例如:一个js文件、嵌入在HTML页面中的js代码等。
2. Eval Code,即使用eval()函数动态执行的JS代码。
3. Function Code,即用户自定义函数中的函数体JS代码。
不同类型的JavaScript代码具有不同的Execution Context

在一个页面中,第一次载入JS代码时创建一个全局执行环境,当调用一个 JavaScript 函数时,该函数就会进入相应的执行环境。如果又调用了另外一个函数(或者递归地调用同一个函数),则又会创建一个新的执行环境,并且在函数调用期间执行过程都处于该环境中。当调用的函数返回后,执行过程会返回原始执行环境。因而,运行中的 JavaScript 代码就构成了一个执行环境栈。

让我们来看一个示例:

<script type="text/javascript"> 
function Fn1(){ 
function Fn2(){ 
alert(document.body.tagName);//BODY 
//other code... 
} 
Fn2(); 
} 
Fn1(); 
//code here 
</script>

理解Javascript_12_执行模型浅析
以上是程序从上到下执行时的执行环境栈情况图。

补充说明:
全局执行环境对应的是Global Code(全局代码)
Fn1执行环境、Fn2执行环境通称为函数执行环境对应的是Function Code(函数定义代码)

程序在进入每个执行环境的时候都会创建一个叫做Variable Object的对象。
针对于函数执行环境,函数对应的每一个参数、局部变量、内部方法都会在Variable Object上创建一个属性,属性名为变量名,属性值为变量值。针对于全局执行环境,具有相同的行为。但是要强调的一点是在全局执行环境中Varible Object就是Global Object,关于Global Object在《理解Javascript_03_javascript全局观》中已经说明了,可以简单的理解为window对象。这也就解释了全局方法和全局变量为什么都是window对象的属性或方法的原因,请看如下代码:

var num = 123; 
alert(window.num);//123 
function say(msg){ 
alert(msg); 
} 
window.say("hello");//hello

最后要说的是,Variable Object对象是一个内部对象,JS代码中无法直接访问。

关于Scope/Scope Chain
在访问变量时,就必须存在一个可见性的问题,这就是Scope。更深入的说,当访问一个变量或调用一个函数时,JavaScript引擎将不同执行位置上的Variable Object按照规则构建一个链表,在访问一个变量时,先在链表的第一个Variable Object上查找,如果没有找到则继续在第二个Variable Object上查找,直到搜索结束。这也就形成了Scope Chain的概念。
理解Javascript_12_执行模型浅析
作用域链图,清楚的表达了执行环境与作用域的关系(一一对应的关系),作用域与作用域之间的关系(链表结构,由上至下的关系)。

注:本文仅仅从全局角度的看待javascript执行模型,因此不够深入,具体执行细节,请参见后续博文。

参考:
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html
http://lifesinger.org/blog/2009/01/javascript-run-mechanism/

Javascript 相关文章推荐
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
javascript每日必学之运算符
Feb 16 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
理解Javascript_11_constructor实现原理
Oct 18 #Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 #Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 #Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 #Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 #Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 #Javascript
Javascript读取cookie函数代码
Oct 16 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php仿discuz分页效果代码
2008/10/02 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
2017/03/21 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
python实现ipsec开权限实例
2014/11/11 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python交互式图形编程实例(一)
2017/11/17 Python
python代码过长的换行方法
2018/07/19 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
python 爬取疫情数据的源码
2020/02/09 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
面包店的创业计划书范文
2014/01/16 职场文书
社会实践的活动方案
2014/08/22 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS