JavaScript代码内部执行顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //1.页面加载的时候,浏览器会对页面上的或载入的js代码块(或文件)进行扫描,如果遇到定义式函数和显示定义的变量,则对此函数和显示定义的变量进行预编译,处理完成后再由上至下执行;遇到赋值式函数则只是将函数赋值给一个变量,不进行预处理,待调用到的时候才进行处理

        f1(); //我是f1方法
        //“定义式”函数定义       
        function f1() {
            alert('我是f1方法');
        }

        //“赋值式”函数定义
        f2(); //报错,浏览器未对f2进行预处理,则依次执行
        //代码报错后,次块中的代码不再向下执行,执行下一个块中的代码
        var f2 = function () {
            alert('我是f2方法');
        };
        f2(); //此句代码没有执行
       
    </script>
     <!--2.浏览器对每个块或文件进行独立的扫描,然后再对全局的代码进行顺序执行,所以在一个块中是,定义式函数可以在函数调用后定义,但在两个js代码块中时,定义函数所在的块必须在函数被调用的块之前-->
    <script type="text/javascript">
        f3();//报错
    </script>
    <script type="text/javascript">
        function f3() {
            alert('我是f3方法');
        }
    </script>
    <script type="text/javascript">
        f3(); //我是f3方法
    </script>
    <!--3.重复定义的函数会覆盖前面的定义-->
    <script type="text/javascript">
        f4();//我是第二个f4方法
        function f4() {
            alert('我是第一个f4方法');
        }
        f4(); //我是第二个f4方法
        function f4() {
            alert('我是第二个f4方法');
        }
        f4(); //我是第二个f4方法
    </script>
    <!--4.body内部的函数会先于body的onload函数执行-->
    <script type="text/javascript">
        function f5() {
            alert('我是body的onload的f5方法');            
        }
    </script>
    <!--5.严格来说,javascript是没有多线程概念的,所有的程序都是单线程依次执行的-->
    <script type="text/javascript">
        function f6() {
            setInterval(function () {
                alert('我先调用');
            }, 1000);
        }
        function f7() {
            alert('我后调用')
        }
        f6();
        f7();
        //先弹出:我后调用
        //1秒后弹出:我先调用
        //看上去像是f6()与延时程序分两个过程走,但其实,这事javascript的“回调”机制在起作用,类似于操作系统的“中断和响应”---延时程序处设置一个中断,然后执行f7(),待1秒后,再回调f6();
    </script>
</head>
<body onload="f5()">
    <script type="text/javascript">
        alert('我是body内部的代码');
    </script>
    <input type="button" name="name" value="点击我 " onclick="alert('我是button的点击事件')" />
</body>
</html>

 

posted @ 2013-07-30 11:39  小小一书童  阅读(360)  评论(0编辑  收藏  举报