JavaScript解析过程你真的清楚吗？？

来源：互联网发布：怎么用软件开网店编辑：程序博客网时间：2024/05/19 02:28

可能大多数人都这么认为,JavaScript的解析与执行过程都是顺序的...其实不然........

method2.js：

/** part 2 */function method2(){alert("method2~~");}

<!DOCTYPE html><html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>JavaScript解析过程你真的清楚吗？？</title><script type="text/javascript">/** part 1 */function method1(){alert("method1~~");}</script><script type="text/javascript" src="method2.js"></script><script type="text/javascript">/** part 3 */function method3(){alert("method3~~");}method1();//alert method1~~method2();//alert method2~~method3();//alert method3~~</script>  </head>    <body>    This is my HTML page. <br>  </body></html>

我想对于这3个函数的定义，以及最后的调用的结果，大部分人是没有疑问的。那么.....

Test 1：

<!DOCTYPE html><html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>JavaScript解析过程你真的清楚吗？？</title><script type="text/javascript">/** part 1 */function method1(){alert("method1~~");}</script><script type="text/javascript" src="method2.js"></script><script type="text/javascript">/** part 3 *///注意:这是在method3函数定义的上面调用method1();method2();method3();function method3(){alert("method3~~");}</script>  </head>    <body>    This is my HTML page. <br>  </body></html>

当我把method1();method2();method3()的调用代码写在了method3函数的定义之上的时候呢？？？

我想大部分人对于method1();method2();的执行结果是没有疑问的。弹出method1~~ method2~~ 如果有疑问...你就得面壁去了^_^

method3();的执行结果呢？认为报错的童鞋，你就有必要仔细看了哦。其结果是弹出 method3~~

这是为什么呢？用犀牛书(JavaScript权威指南)第五版译文中的一句话解释:
"函数定义在解析时，而不再运行时"
也就是javascript引擎会先处理函数的定义，再执行方法调用(在本例中,只有方法调用);

接下来....

Test 2：

<!DOCTYPE html><html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>JavaScript解析过程你真的清楚吗？？</title><script type="text/javascript">/** part 1 *///调用写在了part1的script标签内method1();method2();method3();function method1(){alert("method1~~");}</script><script type="text/javascript" src="method2.js"></script><script type="text/javascript">/** part 3 */function method3(){alert("method3~~");}</script>  </head>    <body>    This is my HTML page. <br>  </body></html>

经过Test 1的结论,相比大家伙得出的结果应该是弹出：method1~~ method2~~ method3~~

但是....只答对了1/3，只有method1弹出，然后就报错了...

继续看...

Test 3：

<!DOCTYPE html><html>  <head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>JavaScript解析过程你真的清楚吗？？</title><script type="text/javascript">//调用与方法定义不再一个script中，并且在函数定义的script的上面method1();method2();method3();</script><script type="text/javascript">/** part 1 */function method1(){alert("method1~~");}</script><script type="text/javascript" src="method2.js"></script><script type="text/javascript">/** part 3 */function method3(){alert("method3~~");}</script>  </head>    <body>    This is my HTML page. <br>  </body></html>

这次，我把调用的代码写在一个单独的script标签内，并且该script标签，在其他script标签之上

执行结果为：直接报错。

alert方法想必大家都知道，它是window对象的方法(也可以称之为window的一个属性,只不过这个属性是一个函数而已)，调用时候可以省略window 直接写alert(); 也可以写成 window.alert();

经过反复测试，结合犀牛书的那句话。笔者认为：

JavaScript引擎每次遇到script标签时，先处理函数的定义(由于函数的定义是直接写在script标签内的，所以该函数属于window对象的一个属性)，再执行script中的代码。

所以当遇到下一个script标签时，由于之前的定义已经在window属性中，所以调用不会报错。注意：javascript引擎并不会一次性将所有script加载进来，先处理函数定义，

再调用(经过这次的测试后,笔者的见解)。

解释Test 1的解析过程

javascript引擎遇到part1位置的script标签时，先定义method1函数，并且将method1函数赋值给window对象的同名属性(这个赋给window对象属性这个说法可能不恰当)。

由于part1位置的script标签内，没有代码可以执行。。所以往下解析...遇到了<script src="method2.js"> 将method2.js加载进来,之后的处理同part1部分。

遇到part3部分，处理method3函数的定义,赋给window对象同名属性，再执行method1(); method2();method3(); 后台应该是执行了window.method1();window.method2();

window.method3(); 结果为 method1~~ method2~~ method3~~