理解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 相关文章推荐
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
使用javascript获取页面名称
Dec 23 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
PHP源代码数组统计count分析
2011/08/02 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
VUE实现吸底按钮
2021/03/04 Vue.js
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Django跨域请求原理及实现代码
2020/11/14 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
乔迁之喜答谢词
2015/01/05 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
原告代理词范文
2015/05/25 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技