JavaScript之解释与执行机制

JavaScript之解释与执行机制

不同于其他的编译性语言如Java、C等,运行前需要将其编译为机器语言的文件,JavaScript在运行程序的时候才翻译,即JavaScript是一门解释性脚本语言。

解释型语言:程序不需要编译,程序在运行时才翻译成机器语言,每执行一次都要翻译一次。

编译型语言:程序在执行之前需要一个专门的编译过程,把程序编译成 为机器语言的文件,运行时不需要重新翻译,直接使用编译的结果。

JavaScript翻译过程又做解释过程。

JavaScript解释与执行

JavaScript按照代码块来进行解释和执行,代码块间相互独立,但变量和方法共享。

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

解释

JavaScript代码块在执行时先由解释器进行解释,主要过程是声明所有var变量(并未初始化赋值,当前值为undefined)、解析声明式函数语句,而且是先预定义变量再预定义函数。

JavaScript中函数定义主要主要有两种:声明式与函数表达式。

1
2
3
4
5
6
7
8
9

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

代码分析

  1. 试分析以下代码:
1
2
3
4

alert(a);
alert('ok');
var a = 1;

弹出undefined和ok。因为执行时先解释:1.定义var变量,并未初始化赋值,当前值为undefined。

  1. 请君细看
1
2
3
4

alert(a);
alert('ok');
a = 1;

会发现报错了,因为a未定义,解释时定义var变量,并不会定义此处的a。

到这里我们又发现了一个值得关注的问题–定义变量的方式。

JavaScript变量分两种:全局变量和局部变量。像a = 1;这种定义默认是创建全局变量,其实就相当于window.a = 1;而var a = 1;这种格式是定义一个当前作用域下的变量。解释时只会定义var格式的变量。

3.函数相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
a();
var a = function(){ //声明式函数
alert("函数表达式");
}
alert('ok1');
</script>

<script>
a();
function a(){ //声明式函数
alert("声明式函数");
}
alert('ok2');
</script>

结果如何呢?运行上述代码你会发现弹出了“声明式函数”和“ok2”。
为什么呢,这里就涉及到前面所说的代码块之间是相互独立的,故前面的a()虽然报错了,阻塞了ok1弹出;但是第二段script代码并不受影响。

第一段代码缘何报错?因为代码执行时先解释声明式函数而不会解释函数表达式,此时只是定义了a变量,未初始化,其值为undefined,不是函数。

到此时对JavaScript的解释与执行机制、顺序也算有初步的认识了。