下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序。如果说，JavaScript引擎的工作机制比较深奥是因为它属于底层行为，那么JavaScript代码执行顺序就比较形象了，因为我们可以直观感觉到这种执行顺序，当然JavaScript代码的执行顺序是比较复杂的，所以在深入JavaScript语言之前也有必要对其进行剖析。

1.1  按HTML文档流顺序执行JavaScript代码

首先，读者应该清楚，HTML文档在浏览器中的解析过程是这样的：浏览器是按着文档流从上到下逐步解析页面结构和信息的。JavaScript代码作为嵌入的脚本应该也算做HTML文档的组成部分，所以JavaScript代码在装载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。例如，浏览下面文档页面，你会看到代码是从上到下逐步被解析的。

  1. <script>
  2. alert("顶部脚本");
  3. </script>
  4. <html><head>
  5. <script>
  6. alert("头部脚本");
  7. </script>
  8. <title></title>
  9. </head>
  10. <body>
  11. <script>
  12. alert("页面脚本");
  13. </script>
  14. </body></html>
  15. <script>
  16. alert("底部脚本");
  17. </script>

如果通过脚本标签<script>的src属性导入外部JavaScript文件脚本，那么它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分。不会因为是外部JavaScript文件而延期执行。例如，把上面文档中的头部和主体区域的脚本移到外部JavaScript文件中，然后通过src属性导入。继续预览页面文档，你会看到相同的执行顺序。

  1. <script>
  2. alert("顶部脚本");
  3. </script>
  4. <html>
  5. <head>
  6. <script src="head.js"></script>
  7. <title></title>
  8. </head>
  9. <body>
  10. <script src="body.js"></script>
  11. </body>
  12. </html>
  13. <script>
  14. alert("底部脚本");
  15. </script>

1.2  预编译与执行顺序的关系

在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。

就像我们可以写成这样的形式一样：

function Hello() {

alert("Hello");

}

Hello();

var Hello = function() {

alert("Hello");

}

Hello();

其实都是一样的。

但是当我们对其中的函数进行修改时，会发现很奇怪的问题。

<scripttype="text/javascript">

function Hello(){

alert("Hello");

}

Hello();

functionHello() {

alert("Hello World");

}

Hello();

</script>

我们会看到这样的结果：连续输出了两次Hello World。而非我们想象中的Hello和Hello World。

这是因为Javascript并非完全的按顺序解释执行，而是在解释之前会对Javascript进行一次“预编译”，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。也就是说上面的一段代码其实被JS引擎预编译为这样的形式：

<scripttype="text/javascript">

var Hello = function() {

alert("Hello");

}

Hello = function() {

alert("Hello World");

}

Hello();

Hello();

</script>

我们可以通过上面的代码很清晰地看到，其实函数也是数据，也是变量，我们也可以对“函数“进行赋值（重赋值）。当然，我们为了防止这样的情况，也可以这样：

<scripttype="text/javascript">

functionHello() {

alert("Hello");

}

Hello();

</script>

<scripttype="text/javascript">

functionHello() {

alert("Hello World");

}

Hello();

</script>

这样，程序被分成了两段，JS引擎也就不会把他们放到一起了。

 

当JavaScript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。

做如下处理：

1. 在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的

活动对象，并将那些用var申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。

2. 在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）
所以，就会出现当JavaScript解释器执行下面脚本时不会报错：

  1. alert(a);                            // 返回值undefined
  2. var a=1;
  3. alert(a);                            // 返回值1

由于变量声明是在预编译期被处理的，所以在执行期间对于所有代码来说，都是可见的。但是，你也会看到，执行上面代码，提示的值是undefined，而不是1。这是因为，变量初始化过程发生在执行期，而不是预编译期。在执行期，JavaScript解释器是按着代码先后顺序进行解析的，如果在前面代码行中没有为变量赋值，则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了，所以在第三行代码中会提示变量a的值为1，而不是undefined。

同理，下面示例在函数声明前调用函数也是合法的，并能够被正确解析，所以返回值为1。

  1. f();                                 // 调用函数，返回值1
  2. function f(){
  3. alert(1);
  4. }

但是，如果按下面方式定义函数，则JavaScript解释器会提示语法错误。

  1. f();              // 调用函数，返回语法错误(缺少对象)
  2. var f= function(){
  3. alert(1);
  4. }

这是因为，上面示例中定义的函数仅作为值赋值给变量f，所以在预编译期，JavaScript解释器只能够为声明变量f进行处理，而对于变量f的值，只能等到执行期时按顺序进行赋值，自然就会出现语法错误，提示找不到对象f。

再见一些例子：

 

  1. <scripttype="text/javascript">
  2. /*在预编译过程中func是window环境下的活动对象中的一个属性，值是一个函数，覆盖了undefined值*/
  3. alert(func);//function func(){alert("hello!")}
  4. varfunc = "this is a variable"
  5. functionfunc(){
  6. alert("hello!")
  7. }
  8. /*在执行过程中遇到了var重新赋值为"thisis a variable"*/
  9. alert(func);  //this is a variable
  10. </script>
  11. //对于下面这个例子，经过我的验证不正确
  12. <scripttype="text/javascript">
  13. var name = "feng";
  14. function func(){
  15. /*首先，在func环境内先把name赋值为undefined，然后在执行过程中先寻找func环境下的活动对象的name属性，此时之前已经预编译值为undefined，所以输出是undefined，而不是feng*/
  16. alert(name);  //undefined  我验证的结果是：“feng”
  17. var name = "JSF";
  18. alert(name);  //JSF
  19. }
  20. func();
  21. alert(name); //feng
  22. </script>

虽然变量和函数声明可以在文档任意位置，但是良好的习惯应该是在所有JavaScript代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，然后再引用。

 

 

 

 

 

 

 

 

1.3  按块执行JavaScript代码

所谓代码块就是使用<script>标签分隔的代码段。例如，下面两个<script>标签分别代表两个JavaScript代码块。

  1. <script>
  2. // JavaScript代码块1
  3. var a =1;
  4. </script>
  5. <script>
  6. // JavaScript代码块2
  7. function f(){
  8. alert(1);
  9. }
  10. </script>

JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个<script>标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。

由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。例如，当JavaScript解释器执行下面代码时就会提示语法错误，显示变量a未定义，对象f找不到。

  1. <script>
  2. //JavaScript代码块1
  3. alert(a);
  4. f();
  5. </script>
  6. <script>
  7. //JavaScript代码块2
  8. var a=1;
  9. functionf(){
  10. alert(1);
  11. }
  12. </script>

虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。

1.6.4  借助事件机制改变JavaScript执行顺序

由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。例如，把访问第2块代码中的变量和函数的代码放在页面初始化事件函数中，就不会出现语法错误了。

  1. <script>
  2. //JavaScript代码块1
  3. window.onload= function(){        // 页面初始化事件处理函数
  4. alert(a);
  5. f();
  6. }
  7. </script>
  8. <script>
  9. //JavaScript代码块2
  10. var a =1;
  11. functionf(){
  12. alert(1);
  13. }
  14. </script>

为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。

注意

如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，例如：

  1. window.onload = function(){
  2. f1();
  3. f2();
  4. f3();
  5. }

而且通过这种方式可以改变函数的执行顺序，方法是：简单地调整onload事件处理函数中调用函数的排列顺序。

除了页面初始化事件外，我们还可以通过各种交互事件来改变JavaScript代码的执行顺序，如鼠标事件、键盘事件及时钟触发器等方法，详细讲解请参阅第14章的内容。

1.6.5  JavaScript输出脚本的执行顺序

在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。那么这些动态输出的脚本是如何执行的呢？例如：

  1. document.write('<scripttype="text/javascript">');
  2. document.write('f();');
  3. document.write('functionf(){ ');
  4. document.write('    alert(1);  ');
  5. document.write('}    ');
  6. document.write('<\/script>    ');

运行上面代码，我们会发现：document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。

请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的<script>标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。例如，下面的代码就会把JavaScript代码显示出来，而不是执行它。

  1. document.write('f();');
  2. document.write('functionf(){ ');
  3. document.write('    alert(1);  ');
  4. document.write(');  ');

但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。

Ø 问题一，找不到通过document.write()方法导入的外部JavaScript文件中声明的变量或函数。例如，看下面示例代码。

  1. document.write('<scripttype="text/javascript" src="test.js">
  2. <\/script>');
  3. document.write('<scripttype="text/javascript">  ');
  4. document.write('alert(n);');  // IE提示找不到变量n
  5. document.write('<\/script>    ');
  6. alert(n+1);                          // 所有浏览器都会提示找不到变量n

外部JavaScript文件（test.js）的代码如下：

  1. var n = 1;

分别在不同浏览器中进行测试，会发现提示语法错误，找不到变量n。也就是说，如果在JavaScript代码块中访问本代码块中使用document.write()方法输出的脚本中导入的外部JavaScript文件所包含的变量，会显示语法错误。同时，如果在IE浏览器中，不仅在脚本中，而且在输出的脚本中也会提示找不到输出的导入外部JavaScript文件的变量（表述有点长和绕，不懂的读者可以尝试运行上面代码即可明白）。

Ø 问题二，不同JavaScript引擎对输出的外部导入脚本的执行顺序略有不同。例如，看下面示例代码。

  1. <scripttype="text/javascript">
  2. document.write('<scripttype="text/javascript" src="test1.js">
  3. <\/script>');
  4. document.write('<scripttype="text/javascript">  ');
  5. document.write('alert(2);')
  6. document.write('alert(n+2);');
  7. document.write('<\/script>');
  8. </script>
  9. <scripttype="text/javascript">
  10. alert(n+3);
  11. </script>

外部JavaScript文件（test1.js）的代码如下所示。

  1. var n = 1;
  2. alert(n);

在IE浏览器中的执行顺序如图1-6所示。


图1-6  IE 7浏览器的执行顺序和提示的语法错误

在符合DOM标准的浏览器中的执行顺序与IE浏览器不同，且没有语法错误，如图1-7所示的是在Firefox 3.0浏览器中的执行顺序。


图1-7  Firefox 3浏览器的执行顺序和提示的语法错误

解决不同浏览器存在的不同执行顺序，以及可能存在Bug。我们可以把凡是使用输出脚本导入的外部文件，都放在独立的代码块中，这样根据上面介绍的JavaScript代码块执行顺序，就可以避免这个问题。例如，针对上面示例，可以这样设计：

  1. <scripttype="text/javascript">
  2. document.write('<scripttype="text/javascript"src="test1.js"><\/script>');
  3. </script>
  4. <scripttype="text/javascript">
  5. document.write('<scripttype="text/javascript">  ');
  6. document.write('alert(2);') ;           // 提示2
  7. document.write('alert(n+2);   ');     // 提示3
  8. document.write('<\/script>    ');
  9. alert(n+3);                                    // 提示4
  10. </script>
  11. <scripttype="text/javascript">
  12. alert(n+4);                                    // 提示5
  13. </script>

这样在不同浏览器中都能够按顺序执行上面代码，且输出顺序都是1、2、3、4和5。存在问题的原因是：输出导入的脚本与当前JavaScript代码块之间的矛盾。如果单独输出就不会发生冲突了。

Javascript的执行过程详细研究的更多相关文章

  1. JavaScript的执行过程（深入执行上下文、GO、AO、VO和VE等概念）

    JavaScript的执行过程 前言 编写一段JavaScript代码,它是如何执行的呢?简单来说,JS引擎在执行JavaScript代码的过程中需要先解析再执行.那么在解析阶段JS引擎又会进行哪些操 ...

  2. 游览器中javascript的执行过程

    在讲这个问题之前,先来补充几个知识点,如果对此已经比较了解可以直接跳过 大多数游览器的组件构成如图 在最底层的三个组件分别是网络,UI后端和js解释器.作用如下: (1)网络- 用来完成网络调用,例如 ...

  3. 浅谈javascript函数执行过程

    javascript函数执行过程: 1. 为函数创建一个执行环境 2. 复制函数的 [[scopes]] 属性中的对象构建起执行环境的作用链域 3. 创建函数活动对象并推入执行环境作用链域的前端 4. ...

  4. asp.net mvc4 Controller与Action执行过程的研究（学习笔记）

    当IIS收到一个http请求,把请求信息发给对应的HttpModel(实际是实现类UrlRoutingModule),在HttpModel中会注册HttpApplication 类中的PostReso ...

  5. javascript的执行过程, 语法错误和运行时错误?

    js的执行错误分为 语法syntaxError,和 runtime error, 首先, js引擎会检查 整个脚本的语法, 如果在检查语法的过程中,发现了错误, 比如括哈不配对, 字符串少了 另一半的 ...

  6. 浅谈 JavaScript new 执行过程及function原理

    前言 最近在学习JavaScript语言精粹,感觉写得相当不错.所以这里也算是总结一下.一个方法使用new的方式创建到底是怎样的过程,一个function的声明内部又是怎样执行的呢 另外学的过程中,不 ...

  7. javascript eval 执行过程

    当执行eval时,会执行如下过程 eval(x): 1.如果 x的类型不是string,那么会return x; 2.把x转换成 ecmascript 代码.如果转换失败,责抛出SyntaxError ...

  8. Javascript代码执行过程-《悟透Javascript》笔记

    本文摘录自李战老师<悟透Javascript>一书的部分章节,为适应博客发表作了一点点修改. 1) 预编译分析. JavaScript执行引擎将所有定义式函数直接创建为作用域上的函数变量, ...

  9. javaScript代码执行顺序

    javaScript是一种描述型脚本语言,由浏览器进行动态的解析和执行. 页面加载过程中,浏览器会对页面上载入的每个js代码块进行扫描. JavaScript是一段一段的分析执行的,在分析执行同一段代 ...

随机推荐

  1. Swift-闭包使用及解决循环引用问题

    Swift中闭包使用参考OC中block使用,基本一致 // 闭包类型 首先写(参数列表)->(返回值类型) func loadData(callBack : (jsonData:String) ...

  2. CentOS7安装.NET Core运行环境

    安装.NET Core ->首先需要删除以前安装的版本 -> 获取安装脚本 curl -sSL https://raw.githubusercontent.com/dotnet/cli/r ...

  3. golang中的检验hash

    1.对字符串进行hash 大家可以看一下, SHA1 Hashes Go by Example写道: The pattern for generating a hash is sha1.New(), ...

  4. Html5新增元素中Canvas 与内联SVG的比较！

    SVG与Canvas的区别与比较如下: svg:使用xml描述2D图形,canvas使用javascript描述2D图形. Canvas 是逐像素进行渲染的,在 canvas 中,一旦图形被绘制完成, ...

  5. brush

    简介 Brushing是一个通过点击或触摸来选择一个一维或二维区域的交互操作,比如可以通过点击鼠标并移动. brush经常被用来选择离散的元素比如散点图中的点或桌面上的文件等.它也可以被用来放大选中的 ...

  6. Distributed transactions in Spring, with and without XA

    While it's common to use the Java Transaction API and the XA protocol for distributed transactions i ...

  7. poj2914-Minimum Cut

    题意 \(n\) 个点 \(m\) 条边的无向带权图求全局最小割.\(n\le 500,m\le \frac{n(n-1)}{2}\) . 分析 参考了 这篇博客,去给他点赞. 嘛,今天研究了一下全局 ...

  8. bzoj2301-Problem b

    题意 \(T\le 5\times 10^4\) 次询问,每次询问 \(a,b,c,d,k\le 5\times 10^4\),求 \[ \sum _{i=a}^b\sum _{j=c}^d[gcd( ...

  9. 【数据库_Postgresql】sql语句添加序号，timestamp格式时间截取日期和时间

    SELECT ROW_NUMBER() OVER (ORDER BY sr.receiptid ASC) AS 序号, sr.receiptid, sr.receiptdate, DATE(sr.re ...

  10. 【服务器_Tomcat】Tomcat的Server Options选项

    一.配置 默认前两个是没有勾选的,应该勾选上: 在Cotext节点中有一个reloadable='true'属性,将它改为false,可以在修改java文件后不用重启服务器即可生效,但是不包括新建ja ...