javascript运行机制之执行顺序理解

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 οnlοad="Fn()">

</body>
<script type="text/javascript">
  alert("second");
</script>

到此这篇关于javascript运行机制之执行顺序理解的文章就介绍到这了,更多相关javascript运行机制之执行顺序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript运行机制实例分析

    本文实例讲述了JavaScript运行机制.分享给大家供大家参考,具体如下: 第一次写博客 目前研一第二学期,大二开始入门前端,然而长久以来都是对于框架的简单调用,并未对其进行深入研究,因此,这个博客是作为自我督促的开始.这篇博客的内容源于前段时间写一个微信小程序前端,发现页面的渲染顺序总与自己的预想相违背,因此近期看了一些关于JavaScript运行机制的博客及文档,有了一些基本的框架,接下来就来详细看一下我所了解到的内容. JavaScript执行顺序 首先,JavaScript是按照顺序,

  • JavaScript执行顺序详细介绍

    JavaScript执行顺序详细介绍

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我们可以直观感觉到这种执行顺序,当然JavaScript代码的执行顺序是比较复杂的,所以在深入JavaScript语言之前也有必要对其进行剖析.1.1  按HTML文档流顺序执行JavaScript代码首先,读者应该清楚,H

  • 浅谈JavaScript 的执行顺序

    虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的. 本文章记录本人在学习 JavaScript 中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习. 在 html 文档中的执行顺序 js代码执行顺序比较的形象,用户可以直观的感受这种执行顺序.但是,js代码的执行顺序是比较复杂的.有时候我们会把js代码写在html里面,而html文档在浏览器中解析的过程是这样:浏览器按照文档流从上到下逐步解析

  • 详解javascript new的运行机制

    详解javascript new的运行机制

    和其他高级语言一样javascript 中也有new 运算符,我们知道new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 一.认识new运算符 function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = f

  • 如何确保JavaScript的执行顺序 之实战篇

    如何确保JavaScript的执行顺序 之实战篇

    1. 引言 我曾在文章<如何在多个页面使用同一个HTML片段 - 续>的最后提到JavaScript顺序执行的特性.虽然现代浏览器可以并行的下载JavaScript(部分浏览器),但考虑到JavaScript的依赖关系,他们的执行依然是按照引入顺序进行的. 为了更好的测试这个过程,我写了一个简单的HTTP处理程序页面 service.ashx,它可以接受两个参数: 1. file,需要返回文件的服务器端路径. 2. delay,延迟一定时间后再返回本次HTTP请求(毫秒). 一个典型的页面比如

  • JavaScript 程序执行顺序问题总结

    顺序可能比较乱,写多了再整理,有些术语可能运用也不恰当,欢迎批评指正.以下使用的示例程序都经过了本人的实际验证,兼容各大浏览器.OK,步入正题. 1. 变量的声明和引用 变量必须先声明后引用,这个大家是都知道的,但还是要说说,因为后面要说到一个相关的问题. alert(myStr); // 弹出"undefined"; var myStr = "Hello World!"; alert(myStr); // 弹出"Hello World"; [C

  • 浅谈Javascript 执行顺序

    Javascript是执行顺序是至上而下的,除非你特别说明, Javascript代码不会等到页面加载完毕后才执行.比如一个网页里含有以下HTML代码: 复制代码 代码如下: <div id="ele">welcome to www.jb51.net</div> 如果你在这行HTML代码前,加入如下Javascript代码: 复制代码 代码如下: <script type="text/javascript">  document.

  • 深入理解javascript的执行顺序

    如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语: 1.代码块JavaScript中的代码块是指由<script>标签分割的代码段.例如: 复制代码 代码如下: <script type="text/javascript">     

  • javascript运行机制之执行顺序理解

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:       1.代码块 JavaScript中的代码块是指由<script>

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • Javascript运行机制之Event Loop

    Javascript运行机制之Event Loop

    目录 一.四个概念 1.Javascript是单线程 2.任务队列 3.同步任务.异步任务 4.Javascript执行栈 二.Event Loop 三.实战 一.四个概念 1.Javascript是单线程 单线程意味着我们的js代码只能从上往下同步执行,同一时间只能执行一个任务,这会导致某些执行时间较长或者执行时间不确定的任务会卡住其它任务的正常执行,Event Loop出现的原因正是为了解决此问题. 2.任务队列 为了解决上述的排队问题,有了任务队列,浏览器在异步任务有了结果后,将其添加到任

  • JavaScript运行机制之事件循环(Event Loop)详解

    JavaScript运行机制之事件循环(Event Loop)详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • JavaScript中Promise的执行顺序详解

    JavaScript中Promise的执行顺序详解

    目录 前言 代码分析 then 方法何时调用? 总结 前言 最近看到一个 Promise 相关的很有意思的代码: new Promise((resolve) => { console.log(1) resolve() }).then(() => { new Promise((resolve) => { console.log(2) resolve() }).then(() => { console.log(4) }) }).then(() => { console.log(3

  • javascript运行机制之this详细介绍

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况:1. 纯函数2. 对象方法调用3. 使用new调用构造函数4. 内部函数5. 使用call / apply 6.事件绑定 1. 纯函数 复制代码 代码如下: var name = 'this is window';  //定义window的name属性  f

  • Javascript代码在页面加载时的执行顺序介绍

    一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q

  • 页面中js执行顺序

    下面是测试的代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head runat="server"> <title>测试js的执行顺序</title> <script language="javascript" type="text/javascri

随机推荐