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~~  

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页