javascript执行顺序

king_tt

浏览: 2114826 次
性别:
来自: 深圳

最近访客更多访客>>

u012363178

liangjijiang

jacky_dai

ljmomo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-01 ( 5)
2016-12 ( 132)
2016-11 ( 17)
更多存档...

今天作为前端小菜跑去某厂面试，结果以失败告终。

记得面试官问我在一个页面中js的执行顺序问题，结果由于自己并没有研究过，所以不太清楚，糊里糊涂的结果把自己都说乱了。在网上查了一堆文章之后还是觉得应该由自己敲出来测试一下。下面贴一下测试代码和结果。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>test js</title>
 6 <script type="text/javascript">
 7     alert("<head>标签中第一个内置js代码段，位于链接js的前面。");
 8 </script>
 9 <script type="text/javascript" src="a1.js"></script>
10 <script type="text/javascript" src="a2.js"></script>
11 <script type="text/javascript">
12     alert("<head>标签中第二个内置js代码段，位于链接js的后面。");
13 </script>
14 </head>
15 
16 <body onload="b()">
17     <script defer>
18         alert("defer中的代码段。");
19     </script>
20     
21     <script>
22         alert("body 中的 js 代码段。");
23     </script>
24     
25     <script>
26         function b(){
27             alert("b函数中的js代码段。");
28             }
29     </script>
30     
31     <script>
32         alert("body 中的第二个 js 代码段。");
33     </script>
34     
35 </body>
36 <script>
37     alert("body 之外的 js 代码段。");
38 </script>
39 </html>
40 <script>
41     alert("html 之外的 js 代码段。");
42 </script>

下面是a1.js的内容：

1 // JavaScript Document
2 alert("<head>标签中链接过来的a1.js中的代码。");

下面是a2.js的内容：

// JavaScript Document
alert("<head>标签中链接过来的a2.js中的代码。");

测试结果（alert的顺序）是：js的执行顺序基本上按照在html中出现的顺序，但是也有一些细小的变化。

1.首先执行<head>标签中的js，不论是内置还是外链形式，都是按照出现的顺序执行。

2.接着执行body中的脚本，按顺序直到<html>标签外。

3.然后执行defer="defer"的脚本。（IE中测试支持，chrome和firefox都不支持defer属性，在这两个浏览器中，将作为正常的脚本段按顺序执行）。

4.最后执行body的onload方法b()。

另外：（转自：http://www.cnblogs.com/Jason-Damon/archive/2011/11/12/2246483.html）

JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段的分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。

先看看两个例子：

例子1：

<script>

var hello = function(){

alert('hello,zhangsan');

}

hello();//第一次调用，输出“hello,zhangsan”

var hello = function(){

alert('hello,lisi');

}

hello();//第二次调用，输出“hello,lisi”

<script>

例子2：

 1 <script type="text/javascript">
 2     function hello(){
 3     
 4         alert('hello,zhangsan');
 5     
 6     }
 7     
 8     hello();//第一次调用，输出hello,lisi
 9 
10     function hello(){
11     
12         alert('hello,lisi');
13     
14     }
15     
16     hello();//第二次调用，输出hello,lisi
17 </script>

例子3：

 1 <script type="text/javascript">
 2     function hello(){
 3     
 4         alert('hello,zhangsan');
 5     
 6     }
 7     
 8     hello();//第一次调用，输出hello，zhangsan
 9 </script>
10 <script>    
11     function hello(){
12     
13         alert('hello,lisi');
14     
15     }
16     hello();//第二次调用，输出hello，lisi
17 </script>

在例子2中，两次调用都会输出相同的内容“hello,lisi”。同样是声明两个相同名称的函数，为什么调用的结果却不一样呢？

这就是JavaScript执行顺序导致的。JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。也就是说，在第一次调用hello函数之前，第一个函数语句定义的代码已经被第二个函数定义语句的代码覆盖了，这就是为什么在例子2中第一次调用hallo时，也会输出后面定义的函数内容的原因了。

而在例子3中，两次调用分别在两个不同的代码段内，所以互不影响。

分享到：