最近在復(fù)習(xí)javascript的事件處理時(shí)發(fā)現(xiàn)了一個(gè)問(wèn)題，于是總結(jié)一下：javascript的預(yù)編譯和執(zhí)行順序的問(wèn)題：
<html> <head> <title>事件處理</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type='text/javascript'> //頁(yè)面在在完成加載后 window.onload=function(){ var input=document.getElementById('button'); var p=document.getElementById('p'); var i=1; while(input){ input.onclick=function(){ p.innerHTML+='<br />('+ i +') '+this.nodeName;
alert( j=i>3);//全true
} i++; input=input.parentNode; } } </script> </head> <body> <div> <input type='button' value='Event事件' id='button' /> <p id='p'>事件捕獲的順序：</p> </div> </body></html>
第一次調(diào)用，引用的也是i最后的值6
(6) INPUT
(6) DIV
(6) BODY
(6) HTML
(6) #document
當(dāng)我更改了代碼中紅色的部分后得到的結(jié)果又不相同：
<html> <head> <title>事件處理</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <script type='text/javascript'> //頁(yè)面在在完成加載后 window.onload=function(){ var input=document.getElementById('button'); var p=document.getElementById('p'); var i=1; while(input){ input.onclick=function(){
//修改成++i 也類似
p.innerHTML+='<br />('+ i++ +') '+this.nodeName
alert( j=i>3);//有false 有true
} input=input.parentNode; } } </script> </head> <body> <div> <input type='button' value='Event事件' id='button' /> <p id='p'>事件捕獲的順序：</p> </div> </body></html>
第一次onclick引用時(shí)i=1，引用過(guò)程中加了1，第二次引用時(shí)i=2.
<script type='text/javascript'> alert('one'); </script> <script type='text/javascript'> alert('two'); </script> <script type='text/javascript'> alert('three'); </script>
<script type='text/javascript'> alert(name); //顯示undefined var name='Jude'; alert(name); //顯示Jude</script>
<script type='text/javascript'> test(); //輸出Hello World! function test(){ alert('hello'); //聲明式函數(shù) } test(); //輸出Hello World! var test=function(){ //賦值式函數(shù) alert('test'); } test(); //輸出test function test(){ //聲明式函數(shù) alert('Hello World!'); } test(); //輸出test</script>
<script type='text/javascript'> function test(){ alert('hello'); //顯示hello } test()</script><script type='text/javascript'> function test(){ alert('hello world!'); //顯示hello world！ } test()</script>
<script type='text/javascript'> alert(name); //顯示undefined var name='Jude'; function test(){ alert('hello'); } fun(); //不能調(diào)用下一個(gè)塊的函數(shù)</script><script type='text/javascript'> alert(name); //可以調(diào)用上一個(gè)塊的變量，顯示Jude test(); //可以調(diào)用上一個(gè)塊的函數(shù)，顯示hello function fun(){ alert('fun'); }</script>
<script type='text/javascript'> var a='a'; var b='b'; function test(){ alert(a); //顯示undefined alert(b); //顯示b var a='test'; } test();</script><script type='text/javascript'> var a='a'; var b='b'; function test(){ alert(a); //顯示undefined alert(b); //顯示undefined var a='test'; var b='test'; } test();</script>
<script type="text/javascript"> var a = "Hello"; function test(){ var a; alert(a); a = "World"; alert(a); } </script>
<script type="text/javascript"> var a = "Hello"; function test(){ alert(a); a = "World"; alert(a); } </script>
這個(gè)就是全局變量跟局部變量的scope問(wèn)題嗎？我說(shuō):"當(dāng)全局變量跟局部變量重名時(shí)，局部變量的scope會(huì)覆蓋掉全局變量的 scope，當(dāng)離開局部變量的scope后，又重回到全局變量的scope。所以兩段代碼運(yùn)行的結(jié)果分別為：1) undefined World 2) Hello World。然后我隨意編了如下一個(gè)例子給她：
<script> var a =1; function test(){ alert(a); var a = 2; alert(a); } test(); alert(a); </script>
大家猜結(jié)果等于多少？是輸出1 2 1 嗎？嗯嗯，當(dāng)我把測(cè)試case發(fā)給她之前也是這么認(rèn)為的，但測(cè)試輸出后……運(yùn)行結(jié)果是 undefined 2 1。當(dāng)時(shí)百思不得其解，問(wèn)了谷老師才知道，我對(duì)JS還不是非常了解，所以痛下苦功，學(xué)習(xí)+測(cè)試，總結(jié)如下：
一、Javascript的變量的scope是根據(jù)方法塊來(lái)劃分的（也就是說(shuō)以function的一對(duì)大括號(hào)｛ ｝來(lái)劃分）。切記，是function塊，而for、while、if塊并不是作用域的劃分標(biāo)準(zhǔn)，可以看看以下幾個(gè)例子：
<script> function test2(){ alert ("before for scope:"+i); // i未賦值（并不是未聲明！使用未聲明的變量或函數(shù)全拋出致命錯(cuò)誤而中斷腳本執(zhí)行） // 此時(shí)i的值是underfined for(var i=0;i<3;i++){ alert("in for scope:"+i); // i的值是 0、1、2, 當(dāng)i為3時(shí)跳出循環(huán) } alert("after for scope:"+i); // i的值是3，注意，此時(shí)已經(jīng)在for scope以外，但i的值仍然保留為3 while(true){ var j = 1; break; } alert(j); // j的值是1，注意，此時(shí)已經(jīng)在while scope以外，但j的值仍然保留為1 if(true){ var k = 1; } alert(k); //k的值是1，注意，此時(shí)已經(jīng)在if scope以外，但k的值仍然保留為1 } test2(); //若在此時(shí)（function scope之外）再輸出只存在于test2 這個(gè)function scope里的 i、j、k變量會(huì)發(fā)生神馬效果呢？ alert(i); //error! 沒錯(cuò)，是error，原因是變量i未聲明（并不是未賦值，區(qū)分test2函數(shù)的第一行輸出），導(dǎo)致腳本錯(cuò)誤，程序到此結(jié)束！ alert("這行打印還會(huì)輸出嗎？"); //未執(zhí)行 alert(j); //未執(zhí)行 alert(k); //未執(zhí)行 </script>
二、Javascript在執(zhí)行前會(huì)對(duì)整個(gè)腳本文件的聲明部分做完整分析(包括局部變量)，從而確定實(shí)變量的作用域。怎么理解呢？看下面一個(gè)例子：
<script> var a =1; function test(){ alert(a); //a為undefined! 這個(gè)a并不是全局變量，這是因?yàn)樵趂unction scope里已經(jīng)聲明了（函數(shù)體倒數(shù)第4行）一個(gè)重名的局部變量, //所以全局變量a被覆蓋了，這說(shuō)明了Javascript在執(zhí)行前會(huì)對(duì)整個(gè)腳本文件的定義部分做完整分析,所以在函數(shù)test()執(zhí)行前, //函數(shù)體中的變量a就被指向內(nèi)部的局部變量.而不是指向外部的全局變量. 但這時(shí)a只有聲明，還沒賦值，所以輸出undefined。 a=4 alert(a); //a為4,沒懸念了吧？ 這里的a還是局部變量哦！ var a; //局部變量a在這行聲明 alert(a); //a還是為4,這是因?yàn)橹耙寻?賦給a了 } test(); alert(a); //a為1，這里并不在function scope內(nèi)，a的值為全局變量的值 </script>
三，當(dāng)全局變量跟局部變量重名時(shí)，局部變量的scope會(huì)覆蓋掉全局變量的scope，當(dāng)離開局部變量的scope后，又重回到全局變量的scope，而 當(dāng)全局變量遇上局部變量時(shí)，怎樣使用全局變量呢？用window.globalVariableName。
聯(lián)系客服
