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代码应该放在前面的<script>代码块中,而需要在页面元素加载完后的js放在元素后面,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>
<script type= "text/javascript" >
alert( "second" );
</script>
|
转载于:https://www.cnblogs.com/mei123/p/8509140.html
javascript代码块概念及预编译机制相关推荐
- javascript运行过程中的“预编译阶段”和“执行阶段”
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段 而在javascript中也有类似的"预编译阶段"(javascrip ...
- JavaScript代码块(代码段)
JavaScript代码块(代码段) 代码块就是使用 <script> 标签包含的 JavaScript 代码段. 示例1 在下面示例中,使用了两个 <script> 标签分别 ...
- 利用mysql的预编译机制_SQL注入笔记记录+MySQL的事务隔离级别
(一)SQL注入. 1.如何理解SQL注入? SQL注入是一种将SQL代码添加到输入参数中,传递到SQL服务器解析并执行的一种攻击手法. 2.SQL注入是如何产生的? web开发人员无法保证所有的输入 ...
- .NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析
.NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析 .NET1.1中预编译ASP.NET页面实现原理浅析[1]自动预编译机制浅析 作者:&;nbsp来自:网络 htt ...
- C++封装常用对象和对头文件以及预编译机制的探索
在C++实际开发中,难免会使用到一些你极为常用的算法(比如笔者经常使用的多线程技术),实现这些算法的类或是全局函数或是命名空间等等经常都要被使用多次,你会有哪些办法来使用呢?笔者有4个办法. 第一个方 ...
- 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )
变量: 存储数据的容器 1.声明 var 2.作用域全局变量. 局部变量. 闭包(相对的全局变量): 3.类型a.基本类型(undefined, null, boolean, numb ...
- 敲代码括号技巧_理解代码块概念,养成良好编程习惯 | 亲子课堂 第 3 课
亲子课堂 关卡解析 / 英语教学 / 编程讲解 做亲子编程教育的好帮手! 每周二.四定期更新 地牢 面向真正0编程基础的孩子们,关卡被设计成迷宫的形式,引导孩子们使用编程思维解决问题. 以循序渐进的方 ...
- JavaScript代码块
1.语句 前边我所说表达式和运算符等内容可以理解成是我们一 门语言中的单词,短语.而语句(statement)就是我们这个语言中一句一句完 整的话了.语句是一个程序的基本单位,JavaScript的程 ...
- JavaScript预编译过程
JavaScript预编译过程 阶段(三个) 预编译过程 1. JavaScript代码执行之前的预编译 案例说明 2. 函数执行前的预编译 案例说明 总结 预编译两个小规则: 预编译前奏 阶段(三个 ...
最新文章
- linux 内核网络协议栈
- lucene 自定义评分
- xml与java代码相互装换的工具类
- python 逻辑运算符 数据类型_python02-运算符和基本数据类型
- python图像分类代码_python实现支持向量机遥感图像分类
- 怎么让电脑屏幕一直亮着_电视机指示灯亮不开机怎么办 电视机故障及维修介绍【详解】...
- KDD 2019论文解读:异构信息网络上的对抗生成学习
- C# USB设备的管理(Devcon和注册表的USB操作)
- 光标是停在文本框文字的最后
- python登录交换机执行命令_如何用Python脚本登录到交换机上修改配置?
- oracle中冗余,各位有没有检查冗余索引的脚本
- tab+easyui datagrid无法正常显示
- JavaScript由浅到深【含案例源码】
- 看,程序员是如何白嫖百度文库的!
- 项目管理表格模板/实用表格-WBS及WBS字典
- ClientToScreen 和ScreenToClient 用法
- 安装CAD2006出现html,Win7系统安装cad2006出现已终止CAD2006-Simplifieng安装怎么办
- excel处理几十万行数据_如何用Excel处理200万行以上数据?
- 浏览器开代理后,https地址打不开
- 打造高性能高可靠的 Ceph 块存储系统