美文网首页
js 程序执行与顺序实现详解

js 程序执行与顺序实现详解

作者: 米酒真香 | 来源:发表于2018-03-23 17:50 被阅读19次

    转自

    1、 js中定义式函数和赋值式函数

    JavaScript函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。

    //“定义式”函数:
    function Fn1(){ 
    alert("Hello World!"); 
    } 
    //“赋值式”函数:
    var Fn2 = function(){ 
    alert("Hello World!"); 
    } 
    

    页面加载过程中,浏览器会对页面上或载入的每个js代码块(或文件)进行扫描,如果遇到定义式函数,则进行预处理(类似于C等的编译),处理完成之后再开始由上至下执行;遇到赋值式函数,则只是将函数赋给一个变量,不进行预处理(类似1中变量必须先定义后引用的原则),待调用到的时候才进行处理。下面举个简单的例子:

    //“定义式”函数
    Fn1(); //正常执行
    function Fn1(){ 
    alert("Hello World!"); 
    } 
    

    正常执行,弹出“Hello World!”,浏览器对Fn1进行了预处理,再从Fn1();开始执行。

    //“赋值式”函数
    Fn2(); //报错,Fn2 is not a function
    var Fn2 = function(){ 
    alert("Hello wild!"); 
    } 
    

    报错:Fn2 is not a function,浏览器未对Fn2进行预处理,依序执行,所以报错Fn2未定义。

    2、 代码块及js文件的处理

    “代码块”是指一对<script></script>标签包裹着的js代码,文件就是指.js文件。
    浏览器对每个块或文件进行独立的扫描,然后对全局的代码进行顺序执行。所以,在一个块(文件)中,函数可以在调用之后进行“定义式”定义;但在两个块中,定义函数所在的块必须在函数被调用的块之前。
    如:

    <script type="text/javascript"> 
    Fn(); 
    </script> 
    <script type="text/javascript"> 
    function Fn(){ 
    alert("Hello World!"); 
    } 
    </script> 
    // 报错:Fn is notdefined,两个块换过来就对了 
    

    3、重复定义函数会覆盖前面的定义

    这和变量的重复定义是一样的

    function fn(){ 
    alert(1); 
    } 
    function fn(){ 
    alert(2); 
    } 
    fn(); 
    // 弹出:“2” 
    

    如果是:

    fn(); 
    function fn(){ 
    alert(1); 
    } 
    function fn(){ 
    alert(2); 
    } 
    // 还是弹出:“2” 
    

    4 、body的onload函数与body内部函数的执行

    //html head... 
    <script type="text/javascript"> 
    function fnOnLoad(){ 
    alert("I am outside the Wall!"); 
    } 
    </script> 
    <body onload="fnOnLoad();"> 
    <script type="text/javascript"> 
    alert("I am inside the Wall.."); 
    </script> 
    </body> 
    //先弹出“I am inside the Wall..”; 
    //后弹出“I am outside the Wall!” 
    

    相关文章

      网友评论

          本文标题:js 程序执行与顺序实现详解

          本文链接:https://www.haomeiwen.com/subject/qoixcftx.html