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

可能大多数人都这么认为,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~~

posted on 2012-04-26 16:37 springside5 阅读(161) 评论(0) 编辑收藏举报