刘作权博客
火华
javascript执行顺序
2014-07-29 18:03:33   阅读610次

1、代码块


JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。

举个例子:

<script type="text/javascript">
      alert(str);//因为没有定义str,所以浏览器会出错,下面的不能运行
      alert("我是代码块一");//没有运行到这里
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二"); //这里有运行到
      alert(test); //弹出"我是代码块一变量"
</script>

上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。


 2、声明式函数与赋值式函数

 JS中的函数定义分为两种:声明式函数与赋值式函数。

<script type="text/javascript">
     function Fn(){ //声明式函数
        	
     }
        
     var Fn = function{  //赋值式函数
        	
     }
</script>

声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。


 3、代码执行顺序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test js</title>
<script type="text/javascript">
    alert("<head>标签中第一个内置js代码段,位于链接js的前面。");
</script>
<script type="text/javascript" src="a1.js"></script>
<script type="text/javascript" src="a2.js"></script>
<script type="text/javascript">
    alert("<head>标签中第二个内置js代码段,位于链接js的后面。");
</script>
</head>

<body onload="b()">
    <script defer>
        alert("defer中的代码段。");
    </script>
    
    <script>
        alert("body 中的 js 代码段。");
    </script>
    
    <script>
        function b(){
            alert("b函数中的js代码段。");
            }
    </script>
    
    <script>
        alert("body 中的第二个 js 代码段。");
    </script>
    
</body>
<script>
    alert("body 之外的 js 代码段。");
</script>
</html>
<script>
    alert("html 之外的 js 代码段。");
</script>

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

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

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

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




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航