zoukankan      html  css  js  c++  java
  • 函数执行js 程序执行与顺序详解

    最近研究函数执行,稍微总结一下,以后继续补充:

        JavaScript是一种描述型脚本语言,由浏览器停止动态的解析与执行。函数的定义方式大体有以下两种,浏览器对于不同的方式有不同的解析顺序。 

        

        //“定义式”函数定义 
    function Fn1(){ 
    alert("Hello World!"); 

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

        

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

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

        畸形执行,弹出“Hello World!”,浏览器对Fn1停止了预处理,再从Fn1();开始执行。 

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

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

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


    <script type="text/javascript"> 
    Fn(); 
    </script> 
    <script type="text/javascript"> 
    function Fn(){ 
    alert("Hello World!"); 

    </script> 
    // 报错:Fn is notdefined,两个块换过来就对了

        

        <script>
    try {
    myAbc();
    } catch(e) {
    alert("error");
    }
    function myAbc() {
    alert("another myAbc()");
    }
    </script>
    <script>
    function myAbc() {
    alert("myAbc");
    }
    </script>

        结果:another myAbc()

        

        <script>
    try {
    myAbc();
    } catch(e) {
    alert("error");
    }
    function myAbc() {
    alert("another myAbc()");
    }
    </script>

        这种情况是可以执行的,这说明在一个script范围内定义函数会预加载,这样在调用函数的时候函数就已经存在了。

        

        每日一道理
    信念是巍巍大厦的栋梁,没有它,就只是一堆散乱的砖瓦;信念是滔滔大江的河床,没有它,就只有一片泛滥的波浪;信念是熊熊烈火的引星,没有它,就只有一把冰冷的柴把;信念是远洋巨轮的主机,没有它,就只剩下瘫痪的巨架。

        总结一下,就是各个script代码模块都是顺序执行的,每一个模块的代码只能执行后面已经定义的函数和自己所在代码模块的函数,而不能调用在其后面的模块的函数。

        

        4. 重复定义函数会覆盖后面的定义 
    这和变量的重复定义是一样的,代码: 
    复制代码 代码如下:
    function fn(){ 
    alert(1); 

    function fn(){ 
    alert(2); 

    fn(); 
    // 弹出:“2”

        如果是这样呢: 
    复制代码 代码如下:
    fn(); 
    function fn(){ 
    alert(1); 

    function fn(){ 
    alert(2); 

    // 还是弹出:“2”

        
    5. body的onload函数与body外部函数的执行 
    body外部的函数会先于onload的函数执行,测试代码: 
    复制代码 代码如下:
    //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!”

        body的onload事件触发条件是body内容加载完成,而body中的js代码会在这一事件触发之前运行(为什么呢?6告知你..) 

        
    6. JavaScript是多线程or单线程? 
    严格来说,JavaScript是没有多线程概念的,全部的程序都是“单线程”依次执行的。 
    举个不太适当的例子: 
    复制代码 代码如下:
    function fn1(){ 
    var sum = 0; 
    for(var ind=0; ind<1000; ind++) { 
    sum += ind; 

    alert("谜底是"+sum); 

    function fn2(){ 
    alert("早知道了,我就是不说"); 

    fn1(); 
    fn2(); 
    //先弹出:“谜底是499500”, 
    //后弹出:“早知道了,我就是不说”

        那你肯定要问:那延时执行、Ajax异步加载,不是多线程的吗?没错,上面这样的程序确实看起来像“多线程”: 
    复制代码 代码如下:
    function fn1(){ 
    setTimeout(function(){ 
    alert("我先调用") 
    },1000); 

    function fn2(){ 
    alert("我后调用"); 

    fn1(); 
    fn2(); 
    // 先弹出:“我后调用”, 
    // 1秒后弹出:“我先调用”

        看上去,fn2()和延时程序是分两个过程再走,但其实,这是JavaScript中的“回调”机制在起作用,相似于操作系统中的“中断和响应” —— 延时程序设置一个“中断”,然后执行fn2(),待1000毫秒时间到后,再回调执行fn1()。 
    一样,5中body的onload事件调用的函数,也是利用了回调机制——body加载完成以后,回调执行fnOnLoad()函数。 
    Ajax请求中的数据处理函数也是一样的道理。 

    7. 回调函数 

        回调函数是干吗用的?就是回调执行的函数嘛。
    如6所说,最常见的回调就是onclick、onmouseover、onmousedown、onload等等浏览器事件的调用函数;还有Ajax异步请求数据的处理函数;setTimeOut延时执行、setInterval循环执行的函数等。 

        
    干脆我们写一个纯粹的回调函数玩: 

    function onBack(num){ 
    alert("姗姗我来迟了"); 
    // 执行num个耳光 

    function dating(hours, callBack){ 
    var SP= 0; // SP,恼怒值 
    //女猪脚在雪里站了hours个钟头 
    //循环开始.. 
    SP ++; 
    //循环结束... 
    callBack(SP); 

    dating(1, onBack);

    文章结束给大家分享下程序员的一些笑话语录: 联想——对内高价,补贴对外倾销的伟大“民族”企业。

  • 相关阅读:
    VUE 入门基础(8)
    VUE 入门基础(7)
    VUE 入门基础(6)
    VUE 入门基础(5)
    VUE 入门基础(4)
    VUE 入门基础(3)
    线程的通信
    如何实现一个简单的RPC
    Java程序员必须掌握的线程知识-Callable和Future
    同步函数死锁现象
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3074230.html
Copyright © 2011-2022 走看看