javascript的解析执行顺序

最新推荐文章于 2023-04-27 10:31:45 发布
最新推荐文章于 2023-04-27 10:31:45 发布
阅读量128 收藏
点赞数
分类专栏： js 前端面试

1、代码块

              JavaScript中的代码块是指由<script>标签分割的代码段。例如：

 

1

2

3

4

5

6

<script type="text/javascript">

      alert("这是代码块一");

</script>

<script type="text/javascript">

      alert("这是代码块二");

</script>

　　

 

             JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了：

 

1

2

3

4

5

6

7

8

9

10

<script type="text/javascript">

      alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行

      alert("我是代码块一");//没有运行到这里

      var test = "我是代码块一变量";

</script>

<script type="text/javascript">

      alert("我是代码块二"); //这里有运行到

      alert(test); //弹出"我是代码块一变量"

</script>

　　

                 上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。

 

       2、声明式函数与赋值式函数

                JS中的函数定义分为两种：声明式函数与赋值式函数。

 

1

2

3

4

5

6

7

8

9

<script type="text/javascript">

     function Fn(){ //声明式函数

 

     }

 

     var Fn = function{  //赋值式函数

 

     }

</script>

　　

 

    声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

 

         3、预编译期与执行期

               事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。

               预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

 

1

2

3

4

5

6

7

8

9

10

<script type="text/javascript">

     Fn();  //执行结果："执行了函数2",同名函数后者会覆盖前者

     function Fn(){ //函数1

        alert("执行了函数1");

     }

 

     function Fn(){  //函数2

        alert("执行了函数2");

     }

</script>

　

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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的，而代码一中的变量是完全不存在<span style="font-family: Arial, Helvetica, sans-serif;">的，所以浏览器报错。</span>

 

         理解了上面的几个术语，相信大家对JS的运行机制已经有了个大概的印象了，现在我们来看个例子：

 

 

1

2

3

4

5

6

7

8

<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事件是在最后执行的。

1

2

3

4

5

6

7

8

9

10

11

12

<script type="text/javascript">

    alert("first");

    function Fn(){

        alert("third");

    }

</script>

<body onload="Fn()">

 

</body>

<script type="text/javascript">

    alert("second");

</script>

 

转载地址：https://www.cnblogs.com/bao521/p/6337518.html

或许丶
关注
专栏目录
javascript的解析执行顺序在各个浏览器中的不同
10-26
根据提供的文件信息，我们将详细解析关于JavaScript解析执行顺序在不同浏览器中的差异以及实验设计的相关知识点。 首先，标题中提到的“解析执行顺序”指的是JavaScript代码在浏览器中是如何被解析和执行的。由于...
javascript解析json数据的3种方式
10-25
### JavaScript解析JSON数据的三种方式 在Web开发中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScript中，...
javascript运行机制之执行顺序详解
热门推荐
雾里看花
01-19 4万+
JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。        那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解
JavaScript 运行机制详解：再谈Event Loop
Walter`s blog
11-30 430
单线程JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。 JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM
javascript的解析顺序
weixin_34413802的博客
04-01 131
一、javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的，但是实际上确不是这样的。我们看一下下面的代码。 1 alert(a);2 var a = 1;如果执行顺序是从上到下的，在上面弹出一个a，浏览器会认为从上到下执行的，那么当它alert（a）的时候，他就会发现没有这个东西，那么他就会报错，但是实际上他弹出来的结果是undefined。返回值是undefined说明a没...
JavaScript 运行机制详解
running_shuai的博客
04-28 230
前言： JavaScript 运行机制，提出三个概念：引擎，Web Api，事件循环，回调队列 javascript引擎 流行的javascript引擎，就是chrome的v8引擎 引擎：内存管理，和堆栈。 javascipt的堆栈调用（调用栈） 首先：任何程序的执行都需要开辟空间，即在内存中占用一定的空间 堆栈的概念 在javascript...
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
10-30
在不同的浏览器中，JavaScript 的执行顺序主要受到代码加载和解析方式的影响。常见的 JavaScript 引入方式包括在 HTML 中直接嵌入、外部文件引入、在 JavaScript 代码中动态创建 script 标签引入外部脚本等。 首先...
JavaScript代码执行顺序解析
外部JavaScript文件也会按照引入的顺序进行加载和执行，且不中断文档的加载过程。此外，JavaScript引擎在执行前会有一个预编译阶段，处理变量和函数的声明。" 在JavaScript执行过程中，首先理解HTML文档的解析流程...
JavaScript 运行机制解析
lishuaihao的博客
08-23 159
JavaScript 运行机制解析引言1. 为什么是单线程？2. 为什么需要异步？3. 事件循环4. 异步任务队列细节5. 宏任务和微任务6. 实战鸣谢 引言 在一些面试中，我们或许会被问到这样的问题 简述一下 JavaScript 的运行机制？ 还有可能会被问这样的代码 setTimeout(function () { console.log('定时器开始啦') }); new Promise(function (resolve) { console.log('马上执行for循环啦'
js 异步操作回调函数如何控制执行顺序
10-26
本文为大家讲解下js异步操作时回调函数如何控制执行顺序，感兴趣的朋友可以参考下
javaScript运行机制的理解
wufendi2016的博客
07-25 361
javaScript运行机制的理解本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传是 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
JavaScript在Html中的解析顺序
Hufei的专栏
05-01 3245
用代码来说话，如下： 一个HTML文档中可以包含任意多个
js 顺序执行两个函数
最新发布
weixin_40841731的博客
04-27 482
问题：有时候将js部分代码抽成一个方法，调用后，发现逻辑代码与方法内的代码并不是顺序执行。声明型的函数会在所有的输出前执行，且不论位置在哪。（即声明函数会执行在文档的最前面）解决：将方法定义为声明型的函数。表达式函数定义必须在调用之前。
JavaScript执行顺序总结
qq_41872385的博客
03-11 4715
js的执行顺序
javascript 代码运行顺序说明
weixin_40461030的博客
05-12 213
一. 步骤说明 预解析 --- 把所有的函数定义提前，所有的变量声明提前，变量的赋值不提前。 执行 --- 从上到下执行 （setTimeout，setInterval,ajax中的回调函数，事件中的函数需要触发执行）。 二. 示例 原代码： <!DOCTYPE html> <html> <head> <title>代码运行说明&l...
js的执行顺序
smallNut的博客
02-16 3214
JS的运行机制 先来一个今日头条的面试题 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.l
关于js中函数的执行顺序
生存不忘生活
07-30 3671
函数的声明和调用 JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行。函数的定义方式大体有以下两种，浏览器对于不同的方式有不同的解析顺序。 代码如下: //“定义式”函数定义 function Fn1(){ alert("Hello World!"); } //“赋值式”函数定义 var Fn2 = function(){ alert("Hello wild!");
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值