作者：知乎用户
链接：https://www.zhihu.com/question/23564807/answer/82996422
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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>

JS中函数执行顺序的问题？的更多相关文章

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

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

  2. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  3. JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载

    JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...

  4. [Vue]vue中各选项及钩子函数执行顺序

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...

  5. 进阶学习js中的执行上下文

    在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...

  6. js中函数的参数为函数的情况即回调函数

    js中函数的参数可以是数组对象也可以是函数,当参数为函数时我们叫做回调函数 //定义回调函数function B() { console.log("函数B")setTimeout( ...

  7. JS中函数参数和函数返回值的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

  8. js中的执行环境及作用域

    最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...

  9. 对JS中函数的理解

    函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...

随机推荐

  1. [Python进阶]001.不定参数

    不定参数 介绍 元组参数 字典参数 混合 介绍 不定参数用 * 和 ** 定义 不定参数必须在其他所有参数之后 例子:os.path.join 方法就可以写入不定数量的参数 元组参数 定义:*args ...

  2. Java IO（十二） 字符流 Writer 和 Reader

    Java IO(十二) 字符流 Reader和 Writer 一.介绍 涉及到文件(如果是纯文本文件形式)操作时,Java除了提供 FIle(文件和目录路径名的抽象表示形式) 和 FileDescri ...

  3. RabbitMQ学习笔记一

    前 言 -解决问题  一.RabbitMQ安装  1.安装erlang 环境 a.下载erlang 版本,注意这里需要和安装的rabbitMq版本相配对,rabbitMQ官方网站上可以查到:https ...

  4. Rocket - tilelink - Atomics

    https://mp.weixin.qq.com/s/TSwKL_qm-b-0e8x7r--hhg   简单介绍Atomics中数学运算.逻辑运算的实现.   ​​   1. io   Atomics ...

  5. ActiveMQ 笔记（四）Spring\SpringBoot 整合 Activemq

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.Spring 整合Activemq 1.所需jar包 <dependencies> &l ...

  6. Java实现洛谷 P1616 疯狂的采药

    题目背景 此题为NOIP2005普及组第三题的疯狂版. 题目描述 LiYuxiang是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他 ...

  7. Java实现 LeetCode 655 输出二叉树（DFS+二分）

    655. 输出二叉树 在一个 m*n 的二维字符串数组中输出二叉树,并遵守以下规则: 行数 m 应当等于给定二叉树的高度. 列数 n 应当总是奇数. 根节点的值(以字符串格式给出)应当放在可放置的第一 ...

  8. Java实现蓝桥杯快乐数

    [问题描述] 判断一个正整数是否是快乐数字? 如果一个数字能够通过有限次快乐变换成为1,则是快乐数字. 快乐变换是对一个数字的每一位的平方数求和. 例如: 对于68 68 => 62+82= 1 ...

  9. 运维、python、docker视频教程

    https://space.bilibili.com/97139894/?spm_id_from=333.788.b_7265636f5f6c697374.13 https://www.bilibil ...

  10. Fiddler13模拟弱网络环境测试

    前言现在的Android软件,基本上都会有网络请求,有些APP需要频繁的传输数据时对于网络请求的稳定性和在特殊网络条件下的兼容性有要求,但是我们在测试的时候又很难模拟那种弱网络差网络的情况,今天就给大 ...