javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段
而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块为范围,即每遇到一个代码块都会进行 预编译>执行),
了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结
首先科普下javascript中的两种声明方式,var和function,前者声明的是变量,后者声明的是方法
在预编译中,javascript对这两种声明做出了两种处理方案
<script>
var a = "1"; //声明变量a
function b(){ //声明方法b
alert();
}
var c = function(){ //声明变量c
alert();
}
</script>
以上代码块中,a、c为变量赋值,b为函数声明,当执行以上的代码时,
首先会进入预编译阶段,
对与变量赋值a、c会在内存中开辟一块内存空间并指向变量名,且赋值为undefined
对于函数声明,则同样会进行开辟内存空间,但此时会直接将函数体进行处理,即用函数声明方式,则在预编译阶段便已完成了函数的创建工作
预编译阶段:(PS:不管代码中声明变量和声明函数的顺序如何,在预编译阶段会先声明变量,再声明函数,但是变量初始化过程发生在执行期,而不是预编译期)
<script>
var a = undefined;
var c = undefined;
var b = function(){
alert();
}
</script>
执行阶段:
<script>
a = "1";
c = function(){
alert();
}
</script>
整体执行步骤:
<script>
var a = undefined;
var c = undefined;
var b = function(){
alert();
}
a = "1";
c = function(){
alert();
}
</script>
题目:
<script>
var a =1;
function test(){
alert(a); //a为undefined! 这个a并不是全局变量,这是因为在function scope里已经声明了(函数体倒数第4行)一个重名的局部变量,
//所以全局变量a被覆盖了,这说明了Javascript在执行前会对整个脚本文件的定义部分做完整分析,所以在函数test()执行前,
//函数体中的变量a就被指向内部的局部变量.而不是指向外部的全局变量. 但这时a只有声明,还没赋值,所以输出undefined。
a=4
alert(a); //a为4,没悬念了吧? 这里的a还是局部变量哦!
var a; //局部变量a在这行声明
alert(a); //a还是为4,这是因为之前已把4赋给a了
}
test();
alert(a); //a为1,这里并不在function scope内,a的值为全局变量的值
</script>
PS:相对与window环境下的变量、函数声明,每一个作用域都会对其下的变量和函数进行先声明
<script>
function Hello() {
alert("Hello");
}
Hello();
function Hello() {
alert("Hello World");
}
Hello();
</script>
我们会看到这样的结果:连续输出了两次Hello World。而非我们想象中的Hello和Hello World。
我们会看到这样的结果:连续输出了两次Hello World。而非我们想象中的Hello和Hello World。
这是因为Javascript并非完全的按顺序解释执行,而是在解释之前会对Javascript进行一次“预编译”,在预编译的过程中,会把定义式的函数优先执行,也会把所有var变量创建,默认值为undefined,以提高程序的执行效率。也就是说上面的一段代码其实被JS引擎预编译为这样的形式
<script>
function Hello() {
alert("Hello");
}
function Hello() {
alert("Hello World");
}
Hello();
Hello();
</script>
我们可以通过上面的代码很清晰地看到,其实函数也是数据,也是变量,我们也可以对“函数“进行赋值(重赋值)。
当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理。
做如下处理:
- 在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义。
- 在解释执行阶段,遇到变量需要解析时,会首先从当前执行环境的活动对象中查找,如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找,否则将会按照作用域链查找。遇到var a = …这样的语句时会给相应的变量进行赋值(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined)
所以,就会出现当JavaScript解释器执行下面脚本时不会报错:
alert(a); // 返回值undefined
var a =1;
alert(a); // 返回值1
由于变量声明是在预编译期被处理的,所以在执行期间对于所有代码来说,都是可见的。但是,你也会看到,执行上面代码,提示的值是undefined,而不是1。这是因为,变量初始化过程发生在执行期,而不是预编译期。在执行期,JavaScript解释器是按着代码先后顺序进行解析的,如果在前面代码行中没有为变量赋值,则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了,所以在第三行代码中会提示变量a的值为1,而不是undefined
3.从如下结果中我们知道先是连续两次输出Hello Wrold!,最后连续两次输出test,得出这样的结果是因为javascript并非是完全按照顺序执行的,而是在执行之前先进行一个预编译,预编译 时声明式函数被提取出来,优先执行,而且相同的函数会进行覆盖,再执行赋值式函数。
<script type='text/javascript'>
test(); //输出Hello World!
function test(){
alert('hello'); //声明式函数
}
test(); //输出Hello World!
var test=function(){ //赋值式函数
alert('test');
}
test(); //输出test
function test(){ //声明式函数
alert('Hello World!');
}
test(); //输出test
</script>
实际执行顺序:
<script type='text/javascript'>
var test=undefined;
function test(){
alert('hello'); //声明式函数
}
function test(){ //声明式函数
alert('Hello World!');
}
test(); //输出Hello World!
test(); //输出Hello World!
var test=function(){ //赋值式函数
alert('test');
}
test(); //输出test
test(); //输出test
</script>
4.下面代码显示显示hello,再显示hello world!,这是因为javascript中的给个代码块是相互独立的,当脚本遇到第一个script标签时,则javascript 解析器会等这个代码块加载完成后,先对它进行预编译,然后再执行之,然后javascript解析器准备解析下一个代码块,由于javascript是按 块执行的,所有一个javascript调用下一个块的函数或者变量时,会出现错误
<script type='text/javascript'>
function test(){
alert('hello'); //显示hello
}
test()
</script>
<script type='text/javascript'>
function test(){
alert('hello world!'); //显示hello world!
}
test()
</script>
5.虽然javascript是按块执行的,但不同的块却属于相同的全局作用域,不同的块的变量和函数式可以相互使用的,也就是某个块可以使用前面块的变量和函数,却不可以使用它之后的块的变量和函数
<script type='text/javascript'>
alert(name); //显示undefined
var name='Jude';
function test(){
alert('hello');
}
fun(); //不能调用下一个块的函数
</script>
<script type='text/javascript'>
alert(name); //可以调用上一个块的变量,显示Jude
test(); //可以调用上一个块的函数,显示hello
function fun(){
alert('fun');
}
</script>
综上所述,javascript在执行时的步骤是:
1、先读入第一段代码块
2、对代码块进行语法分析,如果出现语法错误,直接执行第5步骤
3、对var变量和function定义的函数进行“预编译处理”(赋值式函数是不会进行预编译处理的)
4、执行代码块,有错则报错
5、如果还有下一段代码块,则读入下一段代码块,重复步骤2
6、结束
更多信息可查看博客:http://www.cnblogs.com/RunForLove/p/4629510.html