首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

探讨JavaScript语句的执行过程

Posted in Javascript onJanuary 28, 2016

废话不多说，直奔主题了。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语句的执行过程

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
写了一个layout，拖动条连贯，内容区可为iframe
Aug 19 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 Javascript
Javascript复制实例详解
Jan 28 #Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 #Javascript
基于JavaScript的操作系统你听说过吗？
Jan 28 #Javascript
js+canvas绘制矩形的方法
Jan 28 #Javascript
js+canvas简单绘制圆圈的方法
Jan 28 #Javascript
谈一谈javascript闭包
Jan 28 #Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 #Javascript
晶体管(2) 摩托罗拉(1) 66-XI(1) MOTOROLA(1) 77A(2) 音箱(1) BOSE(2) 收信机(3) 军机(1) VOLVO(1)
You might like
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
常用的javascript function代码
2008/05/23 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS实现购物车特效
2017/02/02 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
Python __setattr__、 __getattr__、 __delattr__、__call__用法示例
2015/03/06 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python之列表推导式的用法
2019/11/29 Python
python 消费 kafka 数据教程
2019/12/21 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
伦敦高级内衣品牌：Agent Provocateur（大内密探）
2016/08/23 全球购物
Bluebella德国官网：英国性感内衣和睡衣品牌
2019/11/08 全球购物
教师自荐信范文
2013/12/09 职场文书
平安工地建设方案
2014/05/06 职场文书
2015年纪委工作总结
2015/05/13 职场文书
辅导员学期工作总结
2015/08/14 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技