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

1、代码块

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

示例:

<script>
	代码块一
</script>
<script>
	代码块二
</script>

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

示例:

<script>
	var str = "代码块一";
	function show(){
		console.log("我是代码块一中的方法");
	}
	console.log(a);// 浏览器报错
</script>
<script>
	var test = "代码块二";
	console.log(str); // 调用代码块一中的变量
	show(); // 调用代码块一中的方法
</script>

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

欢迎学习交流——梦幻雪冰

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

示例:

function show(){ 
	//声明式函数
}
var show = function{  
	//函数表达式
}

两者的区别:

// 正常调用到函数alert(sum(2, 6));function sum(a, b) {
	return a + b;
}执行了声明式函数,在预编译期声明函数及被处理了,所以即使sum( )调用函数放在声明函数前也能执行。// 不能正常调用到函数,浏览器报错alert(sum(2, 6));
var sum = function (a, b) {
	return a + b;
}

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

3、预编译期与执行期

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

示例:

function sum() {
	console.log(a);
	var a = 3;
	console.log(a);
}sum();

结果:undefined 3

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

深入探讨:

<script type="text/javascript">
    show();  //浏览器报错
</script>
<script type="text/javascript">
    function show(){ 
        alert("我是另外一个代码块中的函数");
    }
</script>

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

4、总结

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

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

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

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

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

第六步. 结束。

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-10-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏夏时

关于STM32库中 __IO 修饰符(volatile修饰符)

1023
来自专栏SpringBoot

freemarker常用技巧

表达式是FreeMarker的核心功能,FreeMarker中的插值支持多种表达式。 一、直接指定值

541
来自专栏前端知识分享

javascript易混淆的split()、splice()、slice()方法详解

很多时候,一门语言总有那么些相似的方法,容易让人傻傻分不清楚,尤其在不经常用的时候。而本文主要简单总结了JavaScript中的关于字符串和数组中三个容易混淆的...

702
来自专栏九彩拼盘的叨叨叨

JavaScript 的变量和数据类型

信息是由数据组成的。变量可以理解成装数据的“盒子”。操作某个数据,首先要做是找到数据所在的盒子(变量)。放在变量里的数据称为变量值。

472
来自专栏Create Sun

基础拾遗------接口详解

  接口定义了所有类继承接口时应遵循的契约。接口定义了 "要什么" ,派生类定义了 "怎么给" 。  引用CLR VIA C#(类和接口继承)   在Mi...

3478
来自专栏HTML5学堂

Javascript解析机制 执行机制

HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! jav...

2674
来自专栏小樱的经验随笔

【C#学习笔记之一】C#中的关键字

C#中的关键字 关键字是对编译器具有特殊意义的预定义保留标识符。它们不能在程序中用作标识符,除非它们有一个 @ 前缀。例如,@if 是有效的标识符,但 if 不...

3514
来自专栏移动端开发

Swift 内存管理详解

Swift内存管理: Swift 和 OC 用的都是ARC的内存管理机制,它们通过 ARC 可以很好的管理对象的回收,大部分的时候,程序猿无需关心 Swift...

1839
来自专栏从流域到海域

JavaScript闭包详解

JavaScript闭包详解 闭包就是由函数创造的一个词法作用域,里面创建的变量被引用后,可以在这个词法环境之外自由使用(维基百科)。 闭包,官方对闭包...

1968
来自专栏DOTNET

C#要点

内容摘要 1 数据类型   1.1表达范围问题   1.2 数组的长度问题   1.3 值类型与引用类型   1.4 匿名类型与隐式类型   1.5硬编码造成的...

2785

扫码关注云+社区