理解Javascript_12_执行模型浅析

 更新时间:2010年10月18日 00:51:34   作者:   我要评论

大家有没有想过,一段javascript脚本从载入浏览器到显示执行都经过了哪些流程,其执行次序又是如何。本篇博文将引出'javascript执行模型'的概念,并带领大家理解javascript在执行时的处理机制。
简单的开始
简单的代码:
复制代码 代码如下:

<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>


以上是程序从上到下执行时的执行环境栈情况图。

补充说明:
全局执行环境对应的是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执行模型,因此不够深入,具体执行细节,请参见后续博文。

参考:
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/

相关文章

  • 原生js实现放大镜特效

    原生js实现放大镜特效

    这篇文章主要为大家详细介绍了原生js实现放大镜特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS 数组 移除 实现代码

    JS 数组 移除 实现代码

    可以移除数组中的值函数 ,用来取出数组中的一些值,间接的修改了数组值。
    2009-07-07
  • Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。下面通过本文给大家介绍Bootstrap 轮播(Carousel)插件,非常不错,需要的朋友参考下吧
    2016-12-12
  • JS两种类型的表单提交方法实例分析

    JS两种类型的表单提交方法实例分析

    这篇文章主要介绍了JS两种类型的表单提交方法,结合实例形式分析了2种常用的表单提交验证的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • 在JavaScript里防止事件函数高频触发和高频调用的方法

    在JavaScript里防止事件函数高频触发和高频调用的方法

    这篇文章主要介绍了在JavaScript里防止事件函数高频触发和高频调用的方法,本文方法从Underscore.js中摘录而来,需要的朋友可以参考下
    2014-09-09
  • JavaScript识别网页关键字并进行描红的方法

    JavaScript识别网页关键字并进行描红的方法

    这篇文章主要介绍了JavaScript识别网页关键字并进行描红的方法,通过字符串的遍历、匹配及动态添加等操作实现识别与描红的功能,非常简单实用,需要的朋友可以参考下
    2015-11-11
  • 微信小程序开发之实现自定义Toast弹框

    微信小程序开发之实现自定义Toast弹框

    Toast相信对于利用微信小程序开发的朋友们来说都不陌生,有时候官方的样式并不能满足业务要求,怎么办呢,当然有解决办法了。有一个插件可以直接帮我们完成WeToast,这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料,需要的朋友可以参考下。
    2017-06-06
  • JS获取DropDownList的value值与text值的示例代码

    JS获取DropDownList的value值与text值的示例代码

    本篇文章主要是对JS获取DropDownList的value值与text值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript中JSON.parse()与eval()解析json的区别

    javascript中JSON.parse()与eval()解析json的区别

    这篇文章主要介绍了javascript中JSON.parse()与eval()解析json的区别,详细描述了json格式数据的操作技巧,并结合实例形式对比分析了使用JSON.parse()与eval()解析json的区别,需要的朋友可以参考下
    2016-05-05
  • JavaScript获取flash对象与网上的有所不同

    JavaScript获取flash对象与网上的有所不同

    关于js获取flash对象,网上有非常多的例子,但不是我想要的,经测试整理,因此本文诞生了
    2014-04-04

最新评论