JavaScript在页面中的执行顺序

https://blog.csdn.net/superhoy/article/details/52946277

2016年10月27日 15:38:52

阅读数：1258

JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。

那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，我们先来认识几个重要的术语：

　　1、代码块
　　JavaScript中的代码块是指由<script>标签分割的代码段。例如： 
<script type="text/javascript">
      alert("这是代码块一");
</script>
<script type="text/javascript">
      alert("这是代码块二");
</script>
　　JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了： 
<script type="text/javascript">
      alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
      alert("我是代码块一");//没有运行到这里
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二"); //这里有运行到
      alert(test); //弹出"我是代码块一变量"
</script>
　　上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。
　　2、声明式函数与赋值式函数
　　JS中的函数定义分为两种：声明式函数与赋值式函数。 
<script type="text/javascript">
     function Fn(){ //声明式函数
             
     }
         
     var Fn = function{  //赋值式函数
             
     }
</script>
　　声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。
　　3、预编译期与执行期
　　事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。
　　预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。 
<script type="text/javascript">
     Fn();  //执行结果："执行了函数2",同名函数后者会覆盖前者
     function Fn(){ //函数1
        alert("执行了函数1");
     }
         
     function Fn(){  //函数2
        alert("执行了函数2");
     }
</script>   
<script type="text/javascript">
      Fn();  //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。
      function Fn(){ //声明式函数
         alert("执行了声明式函数");
      }
         
      var Fn = function(){  //赋值式函数
         alert("执行了赋值式函数");
      }
</script> 
//代码块一
<script type="text/javascript">
      alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
      alert(str); //弹窗"undefined"
      var str = "aaa";
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。
　　理解了上面的几个术语，相信大家对JS的运行机制已经有了个大概的印象了，现在我们来看个例子： 
<script type="text/javascript">
      Fn();  //浏览器报错:"undefined"
</script>
<script type="text/javascript">
      function Fn(){ //函数1
          alert("执行了函数1");
      }
</script>
　　为什么运行上面的代码浏览器会报错呢？声明函数不是会在预处理期就会被处理了吗，怎么还会找不到Fn()函数呢？其实这是一个理解误点，我们上面说了JS引擎是按照代码块来顺序执行的，其实完整的说应该是按照代码块来进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边编译边处理的核心所在。
　　现在，让我们来总结整理下：
　　step 1.  读入第一个代码块。
　　step 2.  做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
　　step 3.  对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
　　step 4.  执行代码段，有错则报错（比如变量未定义）。
　　step 5.  如果还有下一个代码段，则读入下一个代码段，重复step2。
　　step6. 结束。
　　而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中，而需要在页面元素加载完后的js放在</body>元素后面，body标签的onload事件是在最后执行的。 
<script type="text/javascript">
    alert("first");
    function Fn(){
        alert("third");
    }
</script>
<body onload="Fn()">
     
</body>
<script type="text/javascript">
    alert("second");
</script>

JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载的更多相关文章

  1. 【JavaScript】JavaScript脚本代码的位置及在页面中的执行顺序

    三.如何改变Javascript在页面的执行顺序 利用onload <script type="text/javascript">window.onload = f; ...

  2. javascript的预编译和执行顺序

    原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...

  3. 【分析】浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别（SamWang）

    [分析]浅谈C#中Control的Invoke与BeginInvoke在主副线程中的执行顺序和区别(SamWang) 今天无意中看到有关Invoke和BeginInvoke的一些资料,不太清楚它们之间 ...

  4. Unity脚本在层级面板中的执行顺序测试3

    断断续续的写了3篇,以后有时间可以做成一个系列了 前面2篇测试了GameObject的顺序,以及Awake和OnEnable的时机: Unity脚本在层级面板中的执行顺序测试1 http://www. ...

  5. Unity脚本在层级面板中的执行顺序测试4-附加整理

    测试4为一些附加内容,后续的各种tips都加在此. 前几篇测试的链接: Unity脚本在层级面板中的执行顺序测试1 http://www.cnblogs.com/hont/p/4298110.html ...

  6. Promise对象及它在js中的执行顺序

    关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...

  7. 八、Spring之深入理解声明式事务

    Spring之深入理解声明式事务 何为事务? 事务就是把一系列的动作当成一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. 事务的四个属性: 1.原子性(atomicity) 事务是原子性操 ...

  8. Mac最新Flutter环境搭建运行和对比理解声明式UI

    前言 这段时间一直都在学习和写关于SwiftUI的东西,前面也总结了四篇文章来大体上说了下Demo中功能实现的一些细节,后面准备开始了解学习一下Flutter,争取在年前能再用Flutter写一份项目 ...

  9. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

随机推荐

  1. Linux shell脚本重试机制

    重试机制在实际编程场景中应用比较场景,比如你的任务在请求一个正在写入数据但不确定什么时间会完成的文件,可能就需要通过尝试机制间隔一段时间重新执行任务. 以下 shell 脚本是实现重试机制的模板: # ...

  2. Servlet(1)：基础概念/最简实例

    Servlet 生命周期(1) init()方法初始化Servlet对象  它在第一次创建Servlet时被调用,在后续每次不同用户请求时不再调用.(2) service()方法来处理客户端的请求  ...

  3. 文件上传and富文本页面

    文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" act ...

  4. 为什么单个TCP连接很难占满带宽

    计算 TCP吞吐量的公式 TCP窗口大小(bits) / 延迟(秒) = 每秒吞吐量(bits) 比如说windows系统一般的窗口大小为64K, 中国到美国的网络延迟为150ms. 64KB = 6 ...

  5. Kubernetes架构

    一.Kubernetes 架构: Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. 1. Master 节点 Master 是 ...

  6. vue计算属性VS侦听属性

    原文地址 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 Angular ...

  7. linux学习命令收集

    多看看大神的博客  https://blog.csdn.net/tao934798774/article/details/79491951 ip addr   查看ip地址 ifconfig  查看i ...

  8. [Comet OJ - Contest #7 D][52D 2417]机器学习题_斜率优化dp

    机器学习题 题目大意: 数据范围: 题解: 学长说是决策单调性? 直接斜率优化就好了嘛 首先发现的是,$A$和$B$的值必定是某两个$x$值. 那么我们就把,$y$的正负分成两个序列,$val1_i$ ...

  9. 【LOJ】#3046. 「ZJOI2019」语言

    LOJ#3046. 「ZJOI2019」语言 先orz zsy吧 有一个\(n\log^3n\)的做法是把树链剖分后,形成logn个区间,这些区间两两搭配可以获得一个矩形,求矩形面积并 然后就是对于一 ...

  10. Linux就该这么学——新手必须掌握的命令之文件目录管理命令组

    touch命令 用途 : 用于创建空白文件或设置文件的时间 格式 : touch [选项] [文件] 参数 作用 -a 仅修改”读取时间”(atime) -m 仅修改”修改时间”(mtime) -d ...