JS中函数执行顺序的问题？
链接：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中函数执行顺序的问题？的更多相关文章
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
- php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的（详解）
php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...
- JavaScript在页面中的执行顺序(理解声明式函数与赋值式函数) 转载
JavaScript在页面中的执行顺序 https://blog.csdn.net/superhoy/article/details/52946277 2016年10月27日 15:38:52 阅读数 ...
- [Vue]vue中各选项及钩子函数执行顺序
在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...
- 进阶学习js中的执行上下文
在js中的执行上下文,菜鸟入门基础 这篇文章中我们简单的讲解了js中的上下文,今天我们就更进一步的讲解js中的执行上下文. 1.当遇到变量名和函数名相同的问题. var a = 10; functio ...
- js中函数的参数为函数的情况即回调函数
js中函数的参数可以是数组对象也可以是函数,当参数为函数时我们叫做回调函数 //定义回调函数function B() { console.log("函数B")setTimeout( ...
- JS中函数参数和函数返回值的理解
函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...
- js中的执行环境及作用域
最近在面试时被问到了对作用域链的理解,感觉当时回答的不是很好,今天就来说说js中的作用域链吧. 首先来说说js中的执行环境,所谓执行环境(有时也称环境)它是JavaScript中最为重要的一个概念.执 ...
- 对JS中函数的理解
函数本质就是功能的集合 JS中函数是对象,因此,函数名实际上仅仅是一个指向函数对象的指针,不会与某个函数绑定,所以,JS中没有重载(重载就是通过传递不同类型的参数,使两个相同函数名的函数执行不同的功能 ...
随机推荐
- 慕零的黑夜-头条-第一期(必问)[导读:]1.CSDN必问赏金流向何方 2.CSDN必问偷偷做的手脚 3.CSDN必问靠谱吗 4.关于钱于回答的平衡问题:一美元拍卖骗局 作者:qq3461896724
本期是关于CSDN 必问 (biwen.csdn.net)的内容,欢迎评论 文末,文中插入有 小姐姐 img(附py代码,1.49G) + coding资料 哟~~~ 你看到这篇很可能是在提问.推荐加 ...
- 一文让你快速上手 Mockito 单元测试框架
前言 在计算机编程中,单元测试是一种软件测试方法,通过该方法可以测试源代码的各个单元功能是否适合使用.为代码编写单元测试有很多好处,包括可以及早的发现代码错误,促进更改,简化集成,方便代码重构以及许多 ...
- Java实现 洛谷 P1115 最大子段和
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner scann ...
- lambda操作DataTable进阶版
using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...
- spring Cloud负载均衡Ribbon
Ribbon饥饿加载 默认情况下Ribbon是懒加载的.当服务起动好之后,第一次请求是非常慢的,第二次之后就快很多. 解决方式:开启饥饿加载 ribbon: eager-load: enabled: ...
- 逐点分析，这样做Web端性能测试
前言: 71%用户希望在手机上打开网页能跟电脑一样快: 5秒钟被认为是用户能忍受的最长响应时间,如果响应时间超过5秒,50%的移动用户会放弃: 33%失望的用户会使用竞品替代: 用户尝试三次出现同样性 ...
- 【Spring注解驱动开发】自定义TypeFilter指定@ComponentScan注解的过滤规则
写在前面 Spring的强大之处不仅仅是提供了IOC容器,能够通过过滤规则指定排除和只包含哪些组件,它还能够通过自定义TypeFilter来指定过滤规则.如果Spring内置的过滤规则不能够满足我们的 ...
- ASP.NET Core通过Nacos SDK读取阿里云ACM
背景 前段时间,cranelee 在Github上给老黄提了个issues, 问到了如何用Nacos的SDK访问阿里云ACM. https://github.com/catcherwong/nacos ...
- 小谢第23问： chorme的性能优化工具
问题场景:在前端日趋工程化的今天,前端性能优化是一名合格的前端工程师必备的技能,那么,如何正确的使用性能分析工具呢? 解决方案: 性能分析的流程: 在开发中我一般使用公司开发的测试脚本-kbase-w ...
- Go语言圣经[中文版]
近期整理了一篇Go语言圣经[中文版]在线版本,排版比较适合手机以及PC阅读. Go语言圣经[中文版本]