大家有没有想过,一段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/

转载于:https://www.cnblogs.com/fool/archive/2010/10/16/1853326.html

理解Javascript_12_执行模型浅析相关推荐

  1. java内存模型浅析_浅析java内存模型

    原标题:浅析java内存模型 Java内存模型规范了Java虚拟机与计算机内存是如何协同工作的.Java虚拟机是一个完整的计算机的一个模型,因此这个模型自然也包含一个内存模型--又称为Java内存模型 ...

  2. 高性能IO模型浅析--范志东(Florian)

    代码改变世界 Posts - 74, Articles - 4, Comments - 439 Cnblogs Dashboard Login Home Contact Gallery RSS Flo ...

  3. Nat. Mach. Intell.|从局部解释到全局理解的树模型

    今天介绍美国华盛顿大学保罗·艾伦计算机科学与工程学院的Su-In Lee团队在nature mechine intelligence 2020的论文,该论文提出了一种基于博弈论沙普利值的TreeExp ...

  4. JavaScript对象模型-执行模型

    数据类型 基本数据类型 基本数据类型是JS语言最底层的实现. 简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型 ...

  5. Azure 执行模型

    最后更新时间(英文版):01/20/2015 最后更新时间(中文版):04/11/2015 Azure 提供了用于运行应用程序的不同执行模型.每种模型提供一组不同服务,而你选择哪种模型完全取决于你要做 ...

  6. 深入理解 Java 内存模型(转载)

    摘要: 原创出处 http://www.54tianzhisheng.cn/2018/02/28/Java-Memory-Model/ 「zhisheng」欢迎转载,保留摘要,谢谢! 0. 前提 &l ...

  7. 深入理解 Java内存模型

    深入理解 Java内存模型 原文地址:http://www.54tianzhisheng.cn/2018/02/28/Java-Memory-Model/ 本文主要内容有 Java 内存模型的基础.重 ...

  8. 深入理解 Java 内存模型 JMM

    前提 <深入理解 Java 内存模型>程晓明著,该书在以前看过一遍,现在学的东西越多,感觉那块越重要,于是又再细看一遍,于是便有了下面的读书笔记总结.全书页数虽不多,内容讲得挺深的.细看的 ...

  9. 《Cisco IOS XR技术精要》一4.4 理解二级提交模型

    本节书摘来自异步社区<Cisco IOS XR技术精要>一书中的第4章,第4.4节,作者 [美]Mobeen Tahir , Mark Ghattas , Dawit Birhanu , ...

最新文章

  1. 人人都能学会的python编程教程14:高级特性1
  2. Linux文件系统的隐藏权限:chattr lsattr(journal)
  3. .net core webapi 列表返回指定的字段_ADO.NET 使用初探之SQL操作 | C# 数据操作系列...
  4. 云原生网络代理(MOSN)的进化之路
  5. Codeup-问题 A: 最长公共子序列
  6. Keil升级了,Keil Studio 来了!
  7. JAVA常见算法题(三十一)---冒泡排序
  8. python提取excel数据视频_Python-爬取b站的热门视频并导入Excel中
  9. Pytorch:神经网络工具箱nn
  10. c语言单片机常用函数,C51单片机C语言函数编辑 -单片机-电子工程世界网
  11. 使用自定义手势处理器-陈鹏
  12. Ubuntu环境下NFS服务器搭建
  13. Flutter与RN
  14. 【Android】虚拟环绕声
  15. 【Flume】Flume入门
  16. MATLAB——IIR数字滤波器的设计
  17. vue中使用echarts实现动态数据绑定、获取后端接口数据
  18. PNAS:网络连接的中断预示着中风后多种行为障碍
  19. 【慕伏白教程】《动手学深度学习》学习环境安装流程
  20. wince下更新NK软件(wince ghost V1)成功了

热门文章

  1. JAVA大数--POJ 1715 大菲波数
  2. Optical_Flow(3)
  3. python3(十三)File对象的属性
  4. garmin USB: linux USB host驱动
  5. 五分钟了解操作系统内核
  6. DOA——ESPRIT算法
  7. mysql 2005开发版,SQL server 2019 开发版下载
  8. easyexcel和poi对比_POI 和 EasyExcel
  9. mysql 5.0 修改字符集_修改及查看mysql数据库的字符集
  10. 字符动图_手把手教你做一个python+matplotlib的炫酷的数据可视化动图