深入理解javascript的执行顺序


Posted in Javascript onApril 04, 2014

如果你不能理解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>

 

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
js实现图片无缝滚动
Dec 23 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 #Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 #Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 #Javascript
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
phpize的深入理解
2013/06/03 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python绘制简单彩虹图
2018/11/19 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
打架检讨书400字
2014/01/17 职场文书
超市中秋节活动方案
2014/02/12 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript