理解Javascript_12_执行模型浅析

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261775.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么制作铁闸门_“短笛”拿铁,最近的心头好!

其实花式咖啡除了市面上一些常见的款式外&#xff0c;还有一些是不常见又好喝的&#xff01;今天来给大家推荐一款“短笛”拿铁&#xff0c;最近的最爱&#xff01;什么是短笛拿铁&#xff1f;piccolo latte&#xff0c;在意大利文中“piccolo”是小的意思&#xff0c;而latte则…

SQL Server 2016 RC0 安装(超多图)

微软最新版本的数据库SQL Server 2016在2016年3月9日推出了RC0版本。已经提供了包括简体中文等多种语言版本&#xff0c;不过联机丛书还是英文版的。对OS的要求是WIN8&#xff0c;WIN10&#xff0c; WIN2012&#xff0c;只有64位版本。让我们下载最新的版本安装测试下。Figure-…

vfp赋值超过7位出错_JDK1.7下的HashMap的源码分析

源码分析jdk1.7下的HashMap我们都知道1.7版本的hashmap的底层是数组加链表构成的&#xff0c;那么今天我们就来自己分析一波源码~篇幅有点长&#xff0c;废话不多说&#xff0c;直接开始分析~「属性声明」//初始化容量 static final int DEFAULT_INITIAL_CAPACITY 1 <4;…

笔记本打开计算机盘非常慢,笔记本开机慢怎么办【方法步骤】

许多人多余学术研究或是体育项目之类是十分精通&#xff0c;白手起家&#xff0c;闯出一片事业的也不在少数&#xff0c;但是在面对 高科 技产品时确实碰到了一鼻子灰&#xff0c;确实&#xff0c;各位读者朋友们所精通专业不同&#xff0c;在加上原本科技产品就是一大难题&…

Vi Notes

2019独角兽企业重金招聘Python工程师标准>>> 进入vi的命令 vi filename :打开或新建文件&#xff0c;并将光标置于第一行首 vi n filename &#xff1a;打开文件&#xff0c;并将光标置于第n行首 vi filename &#xff1a;打开文件&#xff0c;并将光标置于最后一行…

究极日月服务器维护时间,超激斗梦境9月25日终极测试服务器维护公告_超激斗梦境9月25日更新了什么_玩游戏网...

2021LPL夏季赛FPX vs V5第三场比赛视频2021LPL夏季赛8月4日FPXvsV5视频在哪看&#xff0c;比赛中FPXvsV5比赛中MVP又是谁&#xff0c;2021LPL夏季赛8月4日的比赛中FPXvsV5谁会获胜呢下面一起和小编来看看吧。【2021LPL夏季赛赛程】【2021LPL夏季赛直播】比赛时间&#xff1a;8月…

页面中用到iframe不能完全显示的解决方案

页面中用到iframe不能完全显示的解决方案 如果在页面中用到了iframe标签&#xff0c;有时在浏览器中并不能完全显示iframe&#xff0c;导致有些iframe内的内容不能被显示&#xff0c;如果遇到这种情况&#xff0c;使用以下js可以解决大多数问题。 这是iframe标签&#xff1a; &…

关灯看视频(Turn Off the Lights)

插件介绍随着使用互联网的人越来越多在网络上看视频已是常事一些相关的软件就运应而生今天为大家推荐一个能够提高用户们看视频体验的插件。关灯看视频Turn Off the Lights观看视频时自动调暗页面让您仿佛置身于电影院中只要轻轻按下灯的开关页面就会暗淡下去。 然后您就可以专…

seo 伪原创_如何判断外包的seo文章是否是抄袭或伪原创?

做为资深的外贸seo运营人员&#xff0c;应该会有将内容外包的情况。有时候就会遇到外包的人有抄袭、复制、伪原创的情况发生。那如何避免这种情况的出现呢&#xff1f;相信很多人都遇到过这种情况&#xff0c;是比较头疼的。那就需要检查。抄袭、伪原创这种是必须检查的&#x…

Interview and paper based test

笔试面试总结 榜样&#xff1a; http://www.cnblogs.com/figure9/archive/2013/01/09/2853649.html ArrayList和Vector的区别&#xff1f; http://blog.csdn.net/luxiaoxun/article/details/7980618 1. 输出集合的排列、组合 http://blog.csdn.net/u010570643/article/details/…

悲观锁和乐观锁_悲观锁和乐观锁处理并发操作

本人在金融公司任职,今天来分享下关于转账的一些并发处理问题,这节内容,我们不聊实现原来,就单纯的看看如何实现废话不多说,咱们直接开始,首先我会模拟一张转账表如下图所示:image.png一张简单的账户表,有name,账户余额等等,接下来我将用三种锁的方式来实现下并发下的互相转账一…

冰原服务器维护,怪猎OL9月20日0:00全区全服维护更新公告

亲爱的猎人&#xff1a;我们将于9月20日0:00对所有大区全部服务器进行更新维护&#xff0c;本次维护预计时间4小时。还请猎人们提早下线&#xff0c;避免不必要的损失。我们将视实际情况提前或延迟开服&#xff0c;感谢大家的支持!维护时间&#xff1a;2016年9月20日(周二)0:00…

属性类:Properties

在一个属性文件中保存了多个属性&#xff0c;每一个属性就是直接用字符串表示出来的"keyvalue对"&#xff0c;而如果想要轻松地操作这些属性文件中的属性&#xff0c;可以通过Properties类方便地完成。 <1>设置和取得属性 import java.util.Properties;// // F…

Js操作cookie

为什么80%的码农都做不了架构师&#xff1f;>>> 贴上一段js操作cookie的方法&#xff1a; //setCookie function setCookie(cname, cvalue, exdays) { var d new Date(); d.setTime(d.getTime() (exdays*24*60*60*1000)); //day var expires "expires…

Eclipse3.6.2 64位启动报“Failed to load the JNI shared library”错的解决方法

Eclipse3.6.2 64位解压后双击运行eclipse&#xff0c;报“Failed to load the JNI shared library”错误。 如下图所示&#xff1a; 原来我的jdk是以前旧32位系统安装jdk后&#xff0c;不支持Eclipse3.6.2 64位导致报错&#xff0c;无法正常运行。从官网上&#xff1a; http://…

一个长方体玻璃容器从里面量长宽_泰来包装分享:如何设计钢边箱里面中型木包装箱...

钢边箱里面的中型木包装箱是以木质材料为主制成的有一定刚性的包装容器&#xff0c;是产品运输包装的主要容器之一&#xff0c;也是我国出口商品使用非常广泛的一种包装&#xff0c;在轻工&#xff0c;机械&#xff0c;半导体等包装领域起着不可替代的重要作用。关于钢边箱里面…

uml 中的小人

平常画uml的时候&#xff0c;经常会用到Actor, 也没仔细思考过Actor的深刻内涵今天看了程序员11月的杂志&#xff0c;里面有篇文章叫<这个小人不简单>&#xff0c;文章中强调用例技术的不同之处在于发现了"卖"-需求是研究软件怎么好卖的技能。现在对uml有了更深…

net start zabbix agent 服务没有相应控制功能_一步到位,服务器监控就是这么简单...

对于运维的日常工作来说&#xff0c;服务器监控是必须且最基础的一项内容。在企业基础设施运维过程中&#xff0c;管理员必须能够掌握所有服务器的运行状况&#xff0c;以便及时发现问题&#xff0c;尽可能减少故障的发生。通常我们会借助一些监控的软件来获取每个服务器的基础…

发现在创建云服务器ecs实例的磁盘快照时_玩转ECS第7讲|ECS数据保护-数据备份新特性与最佳实践...

简介&#xff1a; 本文中&#xff0c;阿里云智能弹性计算专家余初武(悟元)将结合阿里云近期推出的数据备份新特性(快照极速备份、一致性快照组)来介绍云上环境如何做数据备份的最佳实践&#xff1b;适合需要构建云上架构的工程师&#xff0c;架构师和云上实施从业人员收看。关键…

二分法求方程的根_快速求解方程的根——二分法与牛顿迭代法

今天是周四高等数学专题的第7篇文章。之前的文章和大家聊了许多数学上的理论&#xff0c;今天和大家聊点有用的东西。我们都知道&#xff0c;工业上的很多问题经过抽象和建模之后&#xff0c;本质还是数学问题。而说到数学问题就离不开方程&#xff0c;在数学上我们可以用各种推…