javascript的预编译和执行顺序

   最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题

  代码:

代码一<html>
  <head>
    <title>事件处理</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script type=‘text/javascript‘>
        //页面在在完成加载后
        window.onload=function(){
            var input=document.getElementById(‘button‘);
            var p=document.getElementById(‘p‘);
            var i=1;
            while(input){
                input.onclick=function(){
                    p.innerHTML+=‘<br />(‘+ i +‘) ‘+this.nodeName;
                }
                i++;
                input=input.parentNode;
            }
        }
    </script>
  </head>
  <body>
    <div>
    <input type=‘button‘ value=‘Event事件‘ id=‘button‘ />
    <p id=‘p‘>事件捕获的顺序:</p>
    </div>
  </body>
</html>

显示的结果为:

当我更改了代码中红色的部分后得到的结果又不相同:

代码二<html>
  <head>
    <title>事件处理</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <script type=‘text/javascript‘>
        //页面在在完成加载后
        window.onload=function(){
            var input=document.getElementById(‘button‘);
            var p=document.getElementById(‘p‘);
            var i=1;
            while(input){
                input.onclick=function(){
                    p.innerHTML+=‘<br />(‘+ i++ +‘) ‘+this.nodeName;
                }
                input=input.parentNode;
            }
        }
    </script>
  </head>
  <body>
    <div>
    <input type=‘button‘ value=‘Event事件‘ id=‘button‘ />
    <p id=‘p‘>事件捕获的顺序:</p>
    </div>
  </body>
</html>

得到的结果为:

  得出这两种不同的结果那是因为javascript代码在运行时有预编译和执行两个阶段,在预编译阶段会对函数和变量进行处理,对所有的声明变量会赋值为underfined,对所有的声明函数也会赋值为函数的定义。

  下面我们来测试javascript的执行过程

  1.javascript代码执行顺序时按照脚本标签<script>出现的顺序来确定的,浏览下面页面你会发现代码是按从上到下的顺序执行的

<script type=‘text/javascript‘>
    alert(‘one‘);
  </script>
  <script type=‘text/javascript‘>
  alert(‘two‘);
  </script>
  <script type=‘text/javascript‘>
  alert(‘three‘);
  </script>

   2. 因为变量在预编译时被赋予一个undefined初值,所以下面代码中,第一个变量name在代码中没有被赋值,所有就延用undefined这个值,下面的name被赋予了Jude,所以第二次输出的是Jude这个字符。

<script type=‘text/javascript‘>
    alert(name);                    //显示undefined
    var name=‘Jude‘;
    alert(name);                    //显示Jude
</script>

  3.从如下结果中我们知道先是连续两次输出Hello Wrold!,最后连续两次输出test,得出这样的结果是因为javascript并非是完全按照顺序执行的,而是在执行之前先进行一个预编译,预编译时声明式函数被提取出来,优先执行,而且相同的函数会进行覆盖,再执行赋值式函数。

<script type=‘text/javascript‘>
    test();                    //输出Hello World!
    function test(){      
        alert(‘hello‘);     //声明式函数
    }
    test();                    //输出Hello World!

    var test=function(){    //赋值式函数
        alert(‘test‘);
    }
    test();                    //输出test
    function test(){      //声明式函数
        alert(‘Hello World!‘);
    }
    test();                    //输出test
</script>

  4.下面代码显示显示hello,再显示hello world!,这是因为javascript中的给个代码块是相互独立的,当脚本遇到第一个<script>标签时,则javascript解析器会等这个代码块加载完成后,先对它进行预编译,然后再执行之,然后javascript解析器准备解析下一个代码块,由于javascript是按块执行的,所有一个javascript调用下一个块的函数或者变量时,会出现错误

<script type=‘text/javascript‘>
    function test(){
        alert(‘hello‘);                //显示hello
    }
    test()
</script>
<script type=‘text/javascript‘>
    function test(){
        alert(‘hello world!‘);        //显示hello world!
    }
    test()
</script>

  5.虽然javascript是按块执行的,但不同的块却属于相同的全局作用域,不同的块的变量和函数式可以相互使用的,也就是某个块可以使用前面块的变量和函数,却不可以使用它之后的块的变量和函数

<script type=‘text/javascript‘>
    alert(name);                    //显示undefined
    var name=‘Jude‘;
    function test(){
        alert(‘hello‘);
    }
    fun();                            //不能调用下一个块的函数
</script>
<script type=‘text/javascript‘>
    alert(name);                    //可以调用上一个块的变量,显示Jude
    test();                            //可以调用上一个块的函数,显示hello
    function fun(){
        alert(‘fun‘);
    }
</script>

  6.javascript在预编译阶段是以函数来划分作用域的,然后再通过var 声明的变量来与声明函数开辟内存空间,对var变量赋初值undefined。在执行阶段再根据作用域来嘴变量进行赋值.

  第一个代码块中函数里面的变量a是局部变量,因为a在函数内重新用var定义,所以输出undefined,而变量b是全局变量,因为在函数内没有用var重新声明b,所以在给变量b赋值时到全局变量中找全局变量b的值,所以输出的是b.

  第二个代码块中的函数内都重新声明了变量a和b,所以他们都是函数内的局部变量,所以都输出undefined。

<script type=‘text/javascript‘>
    var a=‘a‘;
    var b=‘b‘;
    function test(){
        alert(a);                //显示undefined
        alert(b);                //显示b
        var a=‘test‘;
    }
    test();
</script>
<script type=‘text/javascript‘>
    var a=‘a‘;
    var b=‘b‘;
    function test(){
        alert(a);                //显示undefined
        alert(b);                //显示undefined
        var a=‘test‘;
        var b=‘test‘;
    }
    test();
</script>

  综上所述,javascript在执行时的步骤是:

    1、先读入第一段代码块

    2、对代码块进行语法分析,如果出现语法错误,直接执行第5步骤

    3、对var变量和function定义的函数进行“预编译处理”(赋值式函数是不会进行预编译处理的)

    4、执行代码块,有错则报错

    5、如果还有下一段代码块,则读入下一段代码块,重复步骤2

    6、结束

  

时间: 2024-10-13 22:36:10

javascript的预编译和执行顺序的相关文章

JS的预编译和执行顺序 详析

原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <html>   <head>     <title>事件处理</title>     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

JS的预编译和执行顺序 详析(及全局与局部变量)

最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title>事件处理</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type='text/javascript'> //页

JavaScript的预编译和执行

JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行.所谓代码块就是使用<script>标签分隔的代码段. 整个代码块共有两个阶段,预编译阶段和执行阶段 一.编译阶段 对于常见编译型语言(例如:Java)来说,编译步骤分为:词法分析->语法分析->语义检查->代码优化和字节生成. 对于解释型语言(例如JavaScript)来说,通过词法分析和语法分析得到语法树后,就可以开始解释执行了. (1)词法分析是将字符流(char strea

JavaScript 之 预编译 作用域,作用域链

第一次写博客,本来是学习jQuery遇到闭包问题,发现并没有理解闭包,发现闭包牵扯的知识点太多.复习了一遍(发现自己该记住的全忘了)写在博客里,自己也是小白,希望大神们指点迷津,必将感激不尽. 我们知道JavaScript有两个特点:单线程,解释型语(翻译一行,解释一行).但其实翻译一行,解释一行是最后一部才这样做,在这之前会有一个语法分析:通篇扫描看有没有语法错误,但不执行,通篇扫描之后,会进行 预编译 然后 -->解释一行,执行一行.这就是我们所说的js运行三部曲:语法分析     预编译 

js编译和执行顺序

JS是一段一段执行的(以<script>标签来分割),执行每一段之前,都有一个“预编译”,预编译干的活是:声明所有var变量(初始为undefined),解析定义式函数语句. 还有个关于 "window作用域下,a = 1和var a = 1" 的区别的也很经典: a = 1相当于window.a = 1,是动态地为window添加一个成员: var a = 1是在当前作用域(也就是window)下声明一个a,这个声明是在整个作用域内都有效的. 换句话说,其实区别就在于va

还原真实,javascript之预编译 / 预解析

今天在群里吹水时,有群友提出一个问题.我一看很简单,就立马给出了答案:因为存在变量提升,所以输出undefined.本以为无人反驳,可确招来口诛笔伐.作为写实派的我,一贯以来坚持真实是我的使命,岂能容忍这等虚头巴脑的言论攻击.遂以此文记之,本在还原真实.奈何文笔拙劣,恐表述不当,误人子弟.若有不当之处,还请众佬及时斧正,以正视听. 就是下面这段代码: var obj = { say: function () { console.log(obj) }() } // 输出 undefined 为什么

JavaScript-深入理解JavaScript(一、预编译和执行过程)

一.预解析 javascript 在执行前会进行类似“预解析”的操作:首先会创建一个在当前执行环境下的活动对象, 并将那些用 var 声明的变量.定义的函数设置为活动对象的属性, 但是此时这些变量的赋值都是 undefined 二.解释执行 在javascript解释执行阶段, 遇到变量需要解析时, 会首先从当前执行环境的活动对象中查找, 如果没有找到‍, 而且该执行环境的拥有者有 prototype 属性时则会从 prototype 链中查找, 否则将会按照作用域链查找, 遇到var a =

JavaScript函数——预编译

四部曲 创建AO对象 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined. 将实参值和形参值统一 在函数体内找函数声明,值赋予函数体. 权重按顺序依次增加.以下例子即可体现上述规则 function fn(a){ console.log(a); var a = 123; console.log(a); function a(){} console.log(a); var b = function(){} console.log(b); } fn(1); //f a(){} /

[JavaScript]jquery中各事件执行顺序

1.ajaxStart(全局事件)2.beforeSend3.ajaxSend(全局事件)4.success5.ajaxSuccess(全局事件)6.error7.ajaxError (全局事件)8.complete9.ajaxComplete(全局事件)10.ajaxStop(全局事件)