探讨JavaScript语句的执行过程
废话不多说，直奔主题了。javascript的运行原理总结如下：
1、按照html文档流顺序执行javascript代码
浏览器是按照文档流从上到下逐步解析页面结构和信息的，javascript代码作为嵌入的脚本作为html文档的组成部分，所以javascript代码在加载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的。
如果通过脚本标签<script>的src属性来引入外部.js文件，那么它也将按照其语句出现的顺序来执行，而且执行过程是文档加载的一部分。不会因为是外部js文件而延期执行。
2、预编译和执行顺序的关系
首先看如下这段代码：
<script type="text/javascript">
function hello() {
alert("hello");
}
hello();
function hello() {
alert("hello world");
}
hello();
</script>
上面这段js代码的输出结果是hello world 、hello world，而不是先输出hello，再输出hello world。这是因为javascript并非完全按照顺序来解释执行，而是在解释之前会对javascript进行一次预编译，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。也就是说上面的这段代码其实被JS引擎预编译成下面这样：
<script type="text/javascript">
var hello = function() {
alert("hello");
};
hello = function() {
alert("hello world");
};
hello();
hello();
</script>
通过上面的代码可以清晰的看到，函数其实也是变量，可以对函数进行赋值。为了防止前面那种情况的出现，可以如下定义成两个js文件：
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
<script type="text/javascript">
function hello() {
alert("hello world");
}
hello();
</script>
上面第一个文件，我把hello()放在了function的前面，也是可以输出正确结果的。
<script type="text/javascript">
hello();
var hello = function() {
alert("hello");
};
// hello();
</script>
如果用上面的这种方法对function函数进行定义，那么就会报错，报错信息如下图1所示：
这里报错hello is not a funtion，这是由于在预编译的时候，对于用var声明的变量，虽然最先就处理了，但是变量值是undefined。然后运行hello()的时候，由于前面的hello是undefined，类型没有确定，所以这里是hello is not a function。虽然，程序中有定义这个函数，但是定义的位置放在了调用的后面，那么调用的时候，程序并没有运行到这里，所以没用。
再来看下面的这一段代码：
<script type="text/javascript">
hello();
function hello() {
alert("hello");
}
// hello();
</script>
上面的这段代码虽然调用也是在函数定义的前面，但是这里是以function关键字来定义的，用function来定义的时候，跟var不一样，function定义的时候就已经把函数的值赋了过去，所以这里可以运行。
总结：
当javascript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。处理如下：
(1)在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var声明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。
(2)在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值(注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined)。
(3)综上，一句话总结就是：变量的声明在预编译期，变量的初始化在运行期。
<script type="text/javascript"> alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。 var a = 1; // 这里给前面的没有赋值的a进行赋值为1 alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。 </script>
对于上面的这段代码，输出结果是：先输出undefined，后输出1，分析见代码备注。
虽然变量和函数声明可以在文档任意位置，但是良好的习惯应该是在所有JavaScript代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，然后再引用。
3、按块执行javascript代码
所谓代码块就是使用<script>标签分隔的代码段。JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个<script>标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。
<script> alert(a); </script> <script> var a = 1; </script>
上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。
<script> var a = 1; </script> <script> alert(a); </script>
虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。
4、借助事件机制改变javascript执行顺序
由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
alert(a);
};
// 上面的onload不会执行，只会执行下面的onload
window.onload = function() {
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的(如上面的代码所示)，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript</title>
<script>
window.onload = function() {
// 放到一起
alert(a);
alert("onload2");
};
</script>
<script>
var a = 1;
alert("bb");
</script>
</head>
<body>
</body>
<script>
alert("cc");
</script>
</html>
5、javascript输出脚本的执行顺序
在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的<script>标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。
以上所述是小编给大家介绍的JavaScript语句的执行过程，希望对大家有所帮助。
相关推荐
-
深入浅析JavaScript中with语句的理解
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[]){ name.value = "lee king"; address.value = "Peking";
-
JavaScript中用let语句声明作用域的用法讲解
语法 let variable1 = value1 参数 variable1 要声明的变量的名称. value1 赋给变量的初始值. 备注 使用 let 语句声明一个变量,该变量的范围限于声明它的块中. 可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值. 使用 let 声明的变量,在声明前无法使用,否则将会导致错误. 如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined. 示例: var l = 10; { let l = 2; //
-
浅谈JavaScript变量的自动转换和语句
JS自动类型转换 var a = 1; var b = true; "==" 表示 可以自动类型转换,比较的是数值 "===" 表示可以自动类型转换,先比较数值,再比较类型 if (a == b) { alert("相等"); //打印 }else{ alert("不等"); } 三目运算 var c = 10/2 > 4 ? 5 : 3 ; alert(c); 关于for循环 for ( var i = 0; i &
-
JavaScript程序中的流程控制语句用法总结
条件判断语句 1.if语句 if (condition) statement1 else statement2 其中的condition条件可以是任意表达式,而且对这个表达式的求值结果不一定是布尔值.ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值.如果对condition求值的结果为true,则执行statement1,如果对condition求值结果为false,则执行statement2.这两个语句既可以是一行代码,也可以是一个代码块(推荐). i
-
探讨JavaScript语句的执行过程
废话不多说,直奔主题了.javascript的运行原理总结如下: 1.按照html文档流顺序执行javascript代码 浏览器是按照文档流从上到下逐步解析页面结构和信息的,javascript代码作为嵌入的脚本作为html文档的组成部分,所以javascript代码在加载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的. 如果通过脚本标签<script>的src属性来引入外部.js文件,那么它也将按照其语句出现的顺序来执行,而且执行过程是文档加载的一部分.不会因为是
-
JavaScript 函数的执行过程
1. 每一个JavaScript函数都是Function对象的一个实例, 它有一个仅供JavaScript引擎存取的内部属性[[Scope]]. 这个[[Scope]]存储着一个作用域的集合, 这个集合就叫"作用域链", 集合中存储着"可变对象"VO或"活动对象"AO(AO比VO多this和arguments属性). 2. 当函数被创建后, 其父级作用域的作用域链中的所有可变对象会被加入到它的[[scope]]中(如果父作用域是全局, 那么当前函
-
mysql update语句的执行过程详解
以前有过一篇关于MySQL查询语句的执行过程,这里总结一下update语句的执行过程.由于update涉及到数据的修改,所以,很容易推断,update语句比select语句会更复杂一些. 1,准备 创建一张test表 CREATE TABLE `test` ( `id` int(11) NOT NULL AUTO_INCREMENT, `c` int(11) NOT NULL DEFAULT '0' COMMENT '数值', PRIMARY KEY (`id`) ) ENGINE=InnoDB
-
详解MySQL 查询语句的执行过程
首先先简单的将一个查询语句背后MySQL做了什么捋一捋: 客户端发送一条查询给服务器. 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一个阶段. 服务器端进行SQL解析,预处理,再由优化器生成对应的执行计划. MySQL根据优化器生成的执行计划,调用存储引擎的API来执行查询. 将结果返回给客户端. 接着我们就将这个过程中的这些步骤详细的进行展开. 1.客户端和服务器端之间的通信方式 客户端和服务器之间的通信是一种半双工的通信,即在同一时刻,只能有一方向另一方发送
-
一篇文章弄懂MySQL查询语句的执行过程
前言 需要从数据库检索某些符合要求的数据,我们很容易写出 Select A B C FROM T WHERE ID = XX 这样的SQL,那么当我们向数据库发送这样一个请求时,数据库到底做了什么? 我们今天以MYSQL为例,揭示一下MySQL数据库的查询过程,并让大家对数据库里的一些零件有所了解. MYSQL架构 mysql架构 MySQL 主要可以分为 Server 层和存储引擎层. Server层 包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎的功能都在这一层实现,比如存
-
一条SQL更新语句的执行过程解析
目录 一.执行过程 二.日志模块 1.物理日志redo log redo log的使用场景 redolog配置 2.逻辑日志binlog 两阶段提交 binlog使用场景 前言: 上一篇文章讲解了SQL查询语句执行的过程,并介绍了执行过程中涉及的处理模块.回顾一下,一条查询语句的执行过程一般是经过连接器.分析器.优化器.执行器等功能模块,最后到达存储引擎. 一.执行过程 在SQL查询语句执行的过程中,我们学习过 SQL 语句基本的执行链路,这里我再把那张图拿过来,你也可以先简单看看这个图回顾下.
-
MyBatis核心源码深度剖析SQL语句执行过程
目录 1 SQL语句的执行过程介绍 2 SQL执行的入口分析 2.1 为Mapper接口创建代理对象 2.2 执行代理逻辑 3 查询语句的执行过程分析 3.1 selectOne方法分析 3.2 sql获取 3.3 参数设置 3.4 SQL执行和结果集的封装 4 更新语句的执行过程分析 4.1 sqlsession增删改方法分析 4.2 sql获取 4.3 参数设置 4.4 SQL执行 5 小结 1 SQL语句的执行过程介绍 MyBatis核心执行组件: 2 SQL执行的入口分析 2.1 为Ma
-
了解MySQL查询语句执行过程(5大组件)
目录 开篇 查询请求的执行流程 MySQL组件定义 连接器 查询缓存 分析器 优化器 逻辑变换 代价优化 执行器 总结 开篇 相信广大程序员朋友经常使用MySQL数据库作为书籍持久化的工具,我们最常使用的就是MySQL中的SQL语句,从客户端向MySQL发出一条条指令,然后获取返回的数据结果进行后面的逻辑处理.尽管大家经常使用SQL语句完成工作,你是否关注过其执行的阶段,利用了哪些技术完成?今天,就带大家一起看看MySQL数据库处理SQL请求的全过程.下面将会讲述如下内容: 查询请求在MySQL
-
MySql中sql语句执行过程详细讲解
目录 前言: sql语句的执行过程: 查询缓存: 分析器: 优化器: 执行器: 总结 前言: 很多人都在使用mysql数据库,但是很少有人能够说出来整个sql语句的执行过程是怎样的,如果不了解执行过程的话,就很难进行sql语句的优化处理,也很难设计出来优良的数据库表结构.这篇文章主要是讲解一下sql语句的执行过程. sql语句的执行过程: 客户端.连接器.分析器.优化器.执行器.存储引擎几个阶段. 连接器的作用:管理链接.权限验证的处理. 分析器的作用:词法分析.语法分析. 优化器的作用:执行计
-
新手入门Mysql--sql执行过程
目录 1. 流程 2. 核心架构 2.1 Server 层基本组件介绍 3. 语句分析 3.1 查询语句 3.2 更新语句 4. 总结 1. 流程 2. 核心架构 简单来说 MySQL 主要分为 Server 层和存储引擎层: Server 层:主要包括连接器.查询缓存.分析器.优化器.执行器等,所有跨存储引擎的功能都在这一层实现,比如存储过程.触发器.视图,函数等,还有一个通用的日志模块 binglog 日志模块. 存储引擎: 主要负责数据的存储和读取,采用可以替换的插件式架构,支持 Inno