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. ES6拓展符修改对象

    // ES6 拓展符合并两个对象let ab = { ...a, ...b }; // 等同于 let ab = Object.assign({}, a, b); // 修改对象部分属性.用户自定义的 ...

  2. react-native-picke Cannot read property '_init' of undefined

    使用react-native-picker报以下错误: 查看了react-native-picke的issues: https://github.com/beefe/react-native-pick ...

  3. 在java中有关于反射的皮毛----自己的简略认知

    白首为功名.旧山松竹老,阻归程.欲将心事付瑶琴.知音少,弦断有谁听? 反射(reflection): 当我们在看到这个名词首先会想到的是,我们在上高中时学的物理,那么在java开发中,反射这个名词是怎 ...

  4. tf.metrics.sparse_average_precision_at_k 和 tf.metrics.precision_at_k的自己理解

    tensorflow最大的问题就是大家都讲算法,不讲解用法,API文档又全是英文的,看起来好吃力,理解又不到位.当然给数学博士看的话,就没问题的. 最近看了一系列非常不错的文章,做一下记录: http ...

  5. day26 封装、多态、内置函数、反射、动态导入

    今日内容 1.封装 什么是封装? 封装从字面意思上看就只将某种东西封起来装好,当我们代码中的某些方法与属性不想让外界进行访问时,就对这些属性进行特殊的处理,使这种属性或者方法不能被外界直接进行访问或者 ...

  6. RabbitMQ 的安装配置

    环境:Ubuntu16 linux系统,ERlang语言的源码包 :otp_src_22.0.tar.gz,rabbitMQ安装包:rabbitmq-server-generic-unix-3.7.1 ...

  7. Vuex的简单认识

    一. 什么是vuex? Vuex是一个专为了vue.js 应用程序开发的状态管理模式 二.为什么要用vuex? 构建一个大型单页面应用程序时,Vuex可以更好的帮我们的组件外部更好的统一管理状态 类似 ...

  8. Ruby Rails学习中：Ruby内置的辅助方法，基础内容回顾补充

    一. Ruby内置的辅助方法 1.打开文件:app/views/layouts/application.html.erb(演示应用的网站布局) 来咱把注意力放在圈起来的那一行: 这行代码使用 Rail ...

  9. 杭电2019多校第一场，Problem I，String 2019

    题目描述 Tom has a string containing only lowercase letters. He wants to choose a subsequence of the str ...

  10. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...