javascript 的预解析:(个人理解)代码在执行之前 会在相应的执行环境中预先把 一些东西解析到内存
**一. 那究竟预先解析哪些东西那??答:预先解析 function 和 var
**二. 还有就是预解析的顺序是怎们样的?
1首先是找到<script></script>标签按照<script>块依次解析
2 解析执行环境(这个有点难理解,在下面有具体解释)
3 对标识符( var function)进行解析 (http://blog.csdn.net/u014205965/article/details/45620607#) copy
<script>
test(); // This is test
function test()
{
alert('This is test');
}
</script>
以上案例,在function test()之前就调用了test()函数照样可以弹出 This is test
可见在js执行之前就预先把function test解析到了内存,所以调用test() 照常弹出结果;
接下来看看变量的预解析:
[javascript] view plain copy
<script>
alert(test);//undefined
var test="this is test";
alert(test);//this is test
</script>
在var test=“test”,之前就调用alert弹出test,而没有 报test未定义的错误,而是弹出了undefined,可见在js执行之前就预先把var test;解析到内存,所以不会报错,为什么会弹出undefined是因为,只是把var test的定义预先解析到内存,并没有给变量赋值;
[javascript] view plain copy
var test="this is test";
当我们执行完这句话的时候,就完成了赋值,所以再次调用alert就弹出this is test
接下来继续看:变量和函数重名的时候会是什么情况?
[javascript] view plain copy
<script>
alert(test); //function(){ return " this is function"}
var test="this is test";
function test(){
return "this is function";
}
alert(test); // this is test
alert(test()); // this is function
</script>
这段代码证明了,当函数名和变量名一样的时候,alert(test);调用的是函数function test() 的指针,而不是调用的变量var test; 所以function的预解析 优先级 高于var(个人觉得)
接下来说说“ 解析执行环境 ”是什么意思??看下面的例子
[javascript] view plain copy
<script>
function test(){
var msg ='This is test';
}
alert(msg); // 报错msg未定义
</script>
可能有人会有疑问了,按照上面说的js不是会预解析function 和 var msg吗,我在function 里面定义了var msg ,那为什么调用回报错那???
答案就和我们上面提到的 “解析执行环境” 有关系,在js执行之前是会预解析function 和var 没错,但是在本例中 他们“解析执行环境”不同.
Function test是在一个全局的环境中,而msg是function test中定义的一个局部变量,msg的“解析执行环境”是在function test这个函数里面(这里可以理解为function test里的局部环境),所以当我们在全局这个环境中alert(msg),的时候,并没有定义msg这个变量或者函数,所以就报错了;
为了进一步理解,把上面的例子加以修改
[javascript] view plain copy
<script>
alert(msg); // undefined
function test()
{
alert(msg2);//undefined
var msg2 ='This is test';
}
var msg = "123";
test();
</script>
这个例子,js在执行之前预解析,解析全局的环境,解析到function test 和 var msg ;所以alert(msg);会弹出undefined;
然后当程序执行到test(); 的时候会进入function test里面去,也就是进入function test 的局部环境去 预解析,这时候解析到 var msg2,所以也弹出了undefined;
为了理解的更清楚,可以用IE的F12打个断点看一下
程序开始预解析的时候,实在Global这个全局的执行环境中,解析到了function test 和msg
当我们执行test()的时候,就会进入function test里面这个局部执行环境去解析了
上图可以看到黄色的箭头 有原来的Global 执行环境,变成了test则个局部执行环境了,然后再function test这个局部执行环境中预解析,此时就解析到了 var msg2 这个变量
到这应该可以理解“解析执行环境”这句话了吧,如果还不明白自己动手搞了例子,打个断点debug一下下面这段代码,应该就清楚了!
[javascript] view plain copy
<script>
var a = "我是全局的a";
var b = " 我是全部的b";
function fun1(){
var a = "我是局部的a";
alert(a);
function fun2(){
alert(a);
alert(b);
}
func2();
}
fun1();
</script>
最后说明一下“1首先是找到<script></script>标签按照<script>块依次解析” 这句话是什么意思那?
我们的代码中可能会有多个<script>...</script>标签,每一个<script>...</script>标签我们认为是一个<script>块;js的预解析式按照<script>块来进行的;也就是说js预解析不会跨<script>块去进行预解析,什么意思那?看下面代码
[javascript] view plain copy
<script>
alert(msg);
//test();
</script>
<script>
var msg ="test";
/* function test(){
alert("this is function");
}*/
</script>
这里有两个script块,他们是按照顺序进行预解析的,我们在第二个script块中定义的var msg,而在第一个script块中alert(msg)
显然在第一个script快中并没有预解析到一个叫msg的变量或者函数,而js又不会跨到第二个script块去解析,所以就报错msg未定义
函数function test 也一样
如果把两个script块调换一下位置,结果就不一样了
[javascript] view plain copy
<script>
var msg ="test";
function test(){
alert("this is function");
}
</script>
<script>
alert(msg); // test
test(); // this is function
</script>
script块顺序进行预解析,当第一个script块预解析完,会解析到var msg 和function test,
当再第二个script块中调用alert(msg);和test();时上面的js程序已经执行完毕了,自然会弹出 test 和this is function