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

最新推荐文章于 2022-05-17 13:40:42 发布

HadesCool

最新推荐文章于 2022-05-17 13:40:42 发布

阅读量569

点赞数

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

method2.js：

[html]view plaincopy 
   
 /** part 2 */  
 function method2(){  
     alert("method2~~");  
 }  

[html]view plaincopy 
   
 <!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：

[html]view plaincopy 
   
 <!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：

[html]view plaincopy 
   
 <!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：

[html]view plaincopy 
   
 <!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~~

HadesCool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript解析过程你真的清楚吗？？

可能大多数人都这么认为,JavaScript的解析与执行过程都是顺序的...其实不然........method2.js：[html] view plaincopy/** part 2 */ function method2(){ alert("method2~~"); }
复制链接

扫一扫