JavaScript 运行机制之执行顺序详解
JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解 JavaScript 语言的运行机制,或者简单地说,你不能掌握 JavaScript 的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。
那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:
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
|
<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
|
<script type= "text/javascript" > Fn(); //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。 function Fn(){ //声明式函数 alert( "执行了声明式函数" ); } var Fn = function (){ //赋值式函数 alert( "执行了赋值式函数" ); } </script> |
1
2
3
4
5
6
7
8
9
10
|
//代码块一 <script type= "text/javascript" > alert(str); //浏览器报错,但并没有弹出信息窗 </script> //代码块二 <script type= "text/javascript" > alert(str); //弹窗"undefined" var str = "aaa" ; </script> //js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致代码块二中的变量是unfiened的,而代码一中的变量是完全不存在的,所以浏览器报错。 |
理解了上面的几个术语,相信大家对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> |
本文链接:http://www.cnblogs.com/oooweb/p/javascript-run-order.html
JavaScript 运行机制之执行顺序详解的更多相关文章
- javascript运行机制之执行顺序详解(转)
转自http://www.admin10000.com/document/3385.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言, ...
- javascript运行机制之执行顺序详解
1.代码块 指的的是有标签分割的代码段. 例如: <script type="text/javascript"> alert("这是代码块一"); ...
- Unity 继承MonoBehaviour脚本 执行顺序 详解
先看结果 Awake ->OnEnable-> Start ->-> FixedUpdate-> Update -> LateUpdate ->OnGUI ...
- javascript 执行顺序详解
JavaScript是一种描述 型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript 语言的运行机制,或者简 ...
- React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
- jvm运行机制和volatile关键字详解
参考https://www.cnblogs.com/dolphin0520/p/3920373.html JVM启动流程 1.java虚拟机启动的命令是通过java +xxx(类名,这个类中要有mai ...
- 【Node.js】Event Loop执行顺序详解
本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTime ...
- async/await 执行顺序详解
随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...
- Python装饰器执行顺序详解
探究多个装饰器执行顺序 装饰器是Python用于封装函数或代码的工具,网上可以搜到很多文章可以学习,我在这里要讨论的是多个装饰器执行顺序的一个迷思. 疑问 大部分涉及多个装饰器装饰的函数调用顺序时都会 ...
随机推荐
- Openresty+Lua+Redis灰度发布
灰度发布,简单来说,就是根据各种条件,让一部分用户使用旧版本,另一部分用户使用新版本.百度百科中解释:灰度发布是指在黑与白之间,能够平滑过渡的一种发布方式.AB test就是一种灰度发布方式,让一部分 ...
- HDU 2061 Treasure the new start, freshmen!
http://acm.hdu.edu.cn/showproblem.php?pid=2061 Problem Description background:A new semester comes , ...
- Linux 下安装mysql 8.0.11(CentOS 7.4 系统)
CentOS 7 自带MariaDB (前mysql开发工程师开发的,因此与吗,mysql 有很多相似之处) 1.检查卸载自带的MariaDB rpm -qa|grep mariadb //查询出来已 ...
- [总结] Visual Studio 报价已经对比
来源微软官方网站 对比 https://visualstudio.microsoft.com/zh-hans/vs/compare/?rr=https%3A%2F%2Fwww.ithome.com%2 ...
- vi 基础配置
" Configuration file for vim " CVE-2007-2438 " Normally we use vim-extensions. If you ...
- get mobile http request in PC & fiddler4
get mobile http request in PC 如何在 pc 上抓取 手机的 http 请求 Fiddler 提琴手 https://www.telerik.com/download/fi ...
- Python学习---基础篇
###打开文件并打印: #!/usr/bin/python3 f = open('F://myproject/test.txt', encoding='utf-8',mode='r') content ...
- C#:system.collections.generic(泛型)
1. array是一个固定长度的,如果要动态的存储的话就不行了,虽然 System.Collections.ArrayList(),是一个动态的存储的容器,但是没有对存储中的数据进行一个约束,所以非泛 ...
- noi.acNOIP模拟赛5-count
题目链接 戳我 题意简述 你有一个n+1个数的序列,都是1~n,其中只有一个有重复,求每个长度的本质不同的子序列个数.\(mod 1e9+7\). sol 说起来也很简单,设相同的数出现的位置为\(l ...
- 音视频处理之FFmpeg封装格式20180510
一.FFMPEG的封装格式转换器(无编解码) 1.封装格式转换 所谓的封装格式转换,就是在AVI,FLV,MKV,MP4这些格式之间转换(对应.avi,.flv,.mkv,.mp4文件). 需要注意的 ...