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

脚本宝典收集整理的这篇文章主要介绍了

javascript代码实例教程-javascript执行顺序

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 今天作为前端小菜跑去某厂面试,结果以失败告终。

 

记得面试官问我在一个页面中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()。

 

 

 

另外:(转自:https://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中,两次调用分别在两个不同的代码段内,所以互不影响。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

javascript代码实例教程-javascript执行顺序

全部内容,希望文章能够帮你解决

javascript代码实例教程-javascript执行顺序

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过