深入javascript引擎对脚本的处理过程

标签: javascript 引擎 脚本 | 发表时间:2013-11-27 07:47 | 作者:BJ_benjamin
出处:http://blog.csdn.net

javascript程序与宿主环境进行交互,是通过一系列预定义的方法和属性实现的,这些方法和属性会再映射成浏览器的内部原生代码,所以与其他很对常规的编程语言不同,浏览器开放的这些借口往往受限且有针对性。

a)无论是独立的窗口还是在框架里面,每个展示在浏览器里面的html文档,都被赋予了一个独立的javascript执行环境实例,在这个环境里面加载的脚本的所有全局变量和函数都拥有一个独立的命名空间。

b)同一个文档的所有脚本都运行在同一个执行环境里面,共享同一个沙箱,并且能够通过浏览器提供的API与其他上下文环境交互。

c)在特定的执行上下文里面,每段javascript代码块都是自成体系处理的,顺序也基本确定。每段代码块都是由若干符合语法格式的独立单元组成,处理的过程包括清晰而且连续的三个步骤:源码处理,函数解析,代码执行。

1)源码处理

源码处理阶段会检查脚本代码块里面的语法,通常会先把代码转换成中间层的二进制映像,这样才能或得到令人满意的执行速度。在彻底完成这一步骤之前,这些二进制代码对全局并无影响。如果源码处理阶段出错,整个有问题的代码块都会被弃用;然后解析器会继续处理下一段代码块。 如下示例:

<script type="text/javascript">
	console.log(Benjamin);
	console.log("Benjamin module01");
</script>
<script type="text/javascript">
	console.log("Benjamin module02");
</script>


打印信息:

由上结果,代码块一报错,整个有问题的代码块被弃用,解析器继续处理下一段代码块。

2)函数解析

源码处理之后,解析器对当前代码块里所有具名的全局函数进行识别并注册。在这一阶段完成之后,这些函数才能被执行代码所调用。看下面示例2.1

<script type="text/javascript">
	getMessage();
	function getMessage(){
		console.log("Hello Benjamin!");
	}
</script>


输出Hello Benjamin!,更改成如下表达式声明的代码:

<script type="text/javascript">
	getMessage();
	var getMessage = function(){
		console.log("Hello Benjamin!");
	}
</script>

会报错,TypeError: getMessage is not a function,因为这样的声明的等价于下面的代码,声明提前了,看示例2.2

 

<script type="text/javascript">
	var getMessage = null;
	getMessage();
	getMessage = function(){
		console.log("Hello Benjamin!");
	}
</script>

如果放到两个代码块中会怎样呢?看示例2.3

<script type="text/javascript">
	getMessage();
</script>
<script type="text/javascript">
	var getMessage = function(){
		console.log("Hello Benjamin!");
	}
</script>

因为javascript处理代码块的属性是由javascript引擎读取代码块的先后顺序决定的。当调用的getMessage()函数的时候 getMessage方法还么哟定义呢。javascript这种全局名称解析模型只针对于函数有效,而对于变量的声明却并非如此。变量是按照执行的时候出现的顺序注册的。

3)代码执行

函数解析完后,javascript引擎就会开始顺序执行在函数区块之外的所有代码。如果在执行过程中,当前代码块产生某些异常,脚本的执行可能会失败。其他代码块中的代码扔能正常执行,具体参见源码处理中的示例。

 

 

 

作者:BJ_benjamin 发表于2013-11-26 23:47:57 原文链接
阅读:104 评论:0 查看评论

相关 [javascript 引擎 脚本] 推荐:

使用 SpiderMonkey 使 C++应用支持 JavaScript 脚本引擎

- DreamToTrue - C++博客-牵着老婆满街逛
转载自:http://dozb.bokee.com/1919675.html.   使用 SpiderMonkey 使 C++应用支持 JavaScript 脚本引擎. 翻译:dozb         英文版. 这个教程的目的是演示如何使你的 C++ 应用能够解释执行 JavaScript 脚本. SpiderMonkey, 是 Mozilla 项目的一部分, 是一个执行JavaScript脚本的引擎.

深入javascript引擎对脚本的处理过程

- - CSDN博客Web前端推荐文章
javascript程序与宿主环境进行交互,是通过一系列预定义的方法和属性实现的,这些方法和属性会再映射成浏览器的内部原生代码,所以与其他很对常规的编程语言不同,浏览器开放的这些借口往往受限且有针对性. a)无论是独立的窗口还是在框架里面,每个展示在浏览器里面的html文档,都被赋予了一个独立的javascript执行环境实例,在这个环境里面加载的脚本的所有全局变量和函数都拥有一个独立的命名空间.

Javascipt脚本调试(Javascript debugging)

- - 博客园_首页
根据 CNZZ数据中心对国内主流浏览器的统计分析,2012年3月国产浏览器中360安全浏览器、搜狗高速浏览器和傲游浏览器的使用率分别为24.39%、7.37%、1.75%;国外浏览器中微软IE浏览器、谷歌Chrome浏览器及苹果Safari浏览器的使用率分别为53.40%、3.21%、2.22%.

调试JavaScript脚本程序(Firefox篇)

- - JavaScript - Web前端 - ITeye博客
试Firefox里面的脚本需要安装一个插件Venkman:. 1.       启动Firefox,浏览页面. 2.       点击“Add to firefox”,重启Firefox就可以使用了. 先简单地介绍一下如何在Venkman里面设置断点和查看变量的值. 1.       启动Firefox,运行网页到test.html.

功能强大的JavaScript引擎--SpiderMonkey

- DreamToTrue - C++博客-牵着老婆满街逛
转载自:http://www.ibm.com/developerworks/cn/linux/shell/js/js_engine/index.html. JavaScript是由Netscape开发的对象脚本语言,其特点是开发简单、功能灵活,目前已广泛应用于WEB页面及服务器应用程序中. HTML本身是静态的、不允许用户干预,但用JavaScript编写的脚本程序就可以在用户的浏览器端运行,可以同用户进行交互,从而实现动态页面.

如何选择Javascript模板引擎(javascript template engine)?

- - 译言-每日精品译文推荐
日期:2012-9-17  来源: GBin1.com. 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下:. 你的到了一个JSON对象,如下:. 然后你需要将json数据组织成页面内容,如下:. 代码执行功能非常简单,将json数据生成web页面中的内容,如下:.

7款实用的Javascript代码高亮脚本

- way - UED TEAM,用户体验设计,web前端开发
代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候. 我们可以在显示中支持代码高亮,以便于阅读者可以十分方便的读取代码块、增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本. 这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java、Phyton或Ruby)等写的.

【挑战极限】最短的javascript: 地址栏载入脚本

- mingelz - 博客园-EtherDream の 原创空间
  相信大家都在地址栏里用javascript:的形式执行过脚本. 这种方法简单实用,测试比较短的脚本时经常用到. 并且可以添加到收藏夹里,随时点击调用.   不过脚本比较长的时候,需要复制密密麻麻一大段到地址栏里,显得很不美观,而且脚本修改起来也很不容易. 因此一般先把脚本写在单独一个文件里,然后用javascript: 的形式动态载入脚本到页面中.

(总结)简体繁体转换JS(JavaScript)脚本

- - 服务器运维与网站架构|Linux运维|X研究
PS:前些时间有童鞋问我怎么把繁体网站自动辨认浏览器来切换成简体. 这个其实很简单,我在07年的时候的公司运营的香港讨论区就用过,只需加个JS脚本,再加几行html代码嵌入就OK. 现重新记录一下,有两个版本测试可用. 1、首先把下面这个链接放在提醒用户繁简转换的地方:. 繁体中文.