HTML5学堂-码匠 HTML5学堂

您当前位于:高级JS、面向对象 ——> 原生JavaScript 运行机制中执行顺序详解

原生JavaScript 运行机制中执行顺序详解

2015/04/27 15:37:18 | 作者:HTML5学堂(码匠) | 分类:高级JS、面向对象 | 关键词:JavaScript,代码块,编译,执行,运行机制

JavaScript 运行机制之执行顺序详解

HTML5学堂:JS的解析过程分为两个阶段:预编译期与执行期。预编译期JS会对本代码块中的所有声明的变量(var声明的变量)和函数进行处理,但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

1、代码块

定义:JavaScript中的代码块是指由<script>标签分割的代码段。

  1. <script>
  2.     代码块一
  3. </script>
  4. <script>
  5.     代码块二
  6. </script>

定义:JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。

  1. <script>
  2.     var str = "代码块一";
  3.     function show(){
  4.         console.log("我是代码块一中的方法");
  5.     }
  6.     console.log(a);// 浏览器报错
  7. </script>
  8. <script>
  9.     var test = "代码块二";
  10.     console.log(str); // 调用代码块一中的变量
  11.     show(); // 调用代码块一中的方法
  12. </script>

解析:上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性。

欢迎沟通交流~HTML5学堂

2、声明式函数与函数表达式

示例:

  1. function show(){
  2.     //声明式函数
  3. }
  4. var show = function{
  5.     //函数表达式
  6. }

两者的区别:

  1. // 正常调用到函数
  2.  
  3. alert(sum(2, 6));
  4.  
  5. function sum(a, b) {
  6.     return a + b;
  7. }
  8.  
  9. //执行了声明式函数,在预编译期声明函数及被处理了,所以即使sum( )调用函数放在声明函数前也能执行。
  10. // 不能正常调用到函数,浏览器报错
  11.  
  12. alert(sum(2, 6));
  13. var sum = function (a, b) {
  14.     return a + b;
  15. }

解析:声明式函数与函数表达式的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码;函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

3、预编译期与执行期

JS的解析过程分为两个阶段:预编译期与执行期。预编译期JS会对本代码块中的所有声明的变量(var声明的变量)和函数进行处理,但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

示例:

  1. function sum() {
  2.     console.log(a);
  3.     var a = 3;
  4.     console.log(a);
  5. }sum();

结果:undefined 3

解析:预编译的时候,对声明的变量开辟了内存空间,但是没有赋值,所以变量里面的值是undefined。执行期的时候,代码是从上往下执行,没有对第一个a进行赋值,所以第一个a输出undefined。第二个a为什么会输出3?因为代码执行到var a = 3;的时候给a进行赋值了,覆盖之前undefined的值,所以a当前的值是3,所以输出的值是3。

深入探讨:

  1. <script type="text/javascript">
  2.     show(); //浏览器报错
  3. </script>
  4. <script type="text/javascript">
  5.     function show(){
  6.         alert("我是另外一个代码块中的函数");
  7.     }
  8. </script>

解析:为什么运行上面的代码浏览器会报错?声明函数不是会在预处理期就会被处理了吗,怎么还会找不到show()函数呢?其实这是一个理解误点,我们上面说了JS引擎是按照代码块来进行预处理和执行的,也就是说预处理的只是执行到的代码块的声明函数和变量,而对于还未加载的代码块,是没法进行预处理的,这也是边编译边处理的核心所在。

欢迎沟通交流~HTML5学堂

4、总结

第一步. 读入第一个代码块。

第二步. 做语法分析,有错则报语法错误,并跳转到step5。

第三步. 对var变量和function定义做"预编译处理"(永远不会报错的,因为只解析正确的声明)。

第四步. 执行代码段,有错则报错(比如变量未定义)。

第五步. 如果还有下一个代码段,则读入下一个代码段,重复step2。

第六步. 结束。

另外而根据HTML文档流的执行顺序,需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中,而需要在页面元素加载完后的js放在</body>元素后面,body标签的onload事件是在最后执行的。

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端