JavaScript教程：浅析JS运行机制

从一个简单的问题谈起：

<script type="text/javascript">
    alert(i); // ?
    var i = 1;
</script>

输出结果是undefined, 这种现象被称成“预解析”：JavaScript引擎会优先解析var变量和function定义。在预解析完成后，才会执行代码。如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），运行顺序是：

step1. 读入第一个代码段
step2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5
step3. 对var变量和function定义做“预解析”（永远不会报错的，因为只解析正确的声明）
step4. 执行代码段，有错则报错（比如变量未定义）
step5. 如果还有下一个代码段，则读入下一个代码段，重复step2
step6. 结束

上面的分析，已经能解释很多问题了，但老觉得欠缺点什么。比如step3里，“预解析”究竟是怎么回事？还有step4里，看下面的例子：

<script type="text/javascript">
    alert(i); // error: i is not defined.
    i = 1;
</script>

为什么第一句会导致错误？JavaScript中，变量不是可以不定义吗？

编译过程

时间如白马过隙，书柜旁翻开恍如隔世般的《编译原理》，熟悉而又陌生的空白处有着这样的笔记：

对于传统编译型语言来说，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成。
但对于解释型语言来说，通过词法分析和语法分析得到语法树后，就可以开始解释执行了。

简单地说，词法分析是将字符流(char stream)转换为记号流(token stream), 比如将c = a - b;转换为：

NAME "c"
EQUALS
NAME "a"
MINUS
NAME "b"
SEMICOLON

上面只是示例，更进一步的了解请查看 Lexical Analysis.

《JavaScript权威指南》的第2章，讲的就是词法结构（Lexical Structure），ECMA-262 中也有描述。词法结构是一门语言的基础，很容易掌握。至于词法分析的实现那是另一个研究领域，在此不探究。

可以拿自然语言来类比，词法分析是一对一的硬性翻译，比如一段英文，逐词翻译成中文，得到的是一堆记号流，还很难理解。进一步的翻译，就需要语法分析了，下图是一个条件语句的语法树：

构造语法树的时候，如果发现无法构造，比如if(a { i = 2; }, 就会报语法错误，并结束整个代码块的解析，这就是本文开头部分的step2.

通过语法分析，构造出语法树后，翻译出来的句子可能还会有模

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!