javascript 的預(yù)解析：（個(gè)人理解）就是js代碼在執(zhí)行之前?會(huì)在相應(yīng)的執(zhí)行環(huán)境中?預(yù)先把?一些東西解析到內(nèi)存。如果理解錯(cuò)誤，請(qǐng)多多指正

一. 那究竟預(yù)先解析哪些東西那？？答：預(yù)先解析?function?和?var

二. 還有就是預(yù)解析的順序是怎們樣的？

[plain]?view plaincopy

1首先是找到<script></script>標(biāo)簽按照<script>塊依次解析（最后會(huì)有說明）??

[plain]?view plaincopy

2?解析執(zhí)行環(huán)境（這個(gè)有點(diǎn)難理解，在下面有具體解釋）??

[plain]?view plaincopy

3?對(duì)標(biāo)識(shí)符（?var?function）進(jìn)行解析??

接下來結(jié)合我的測試代碼一一解釋：

[javascript]?view plaincopy

<script>??

????????test();?//?This?is?test??

????????function?test()??

????????{??

????????????alert('This?is?test');??

????????}??

</script>??

以上案例，在function?test()之前就調(diào)用了test()函數(shù)照樣可以彈出?This?is?test

可見在js執(zhí)行之前就預(yù)先把function?test解析到了內(nèi)存，所以調(diào)用test()?照常彈出結(jié)果；

接下來看看變量的預(yù)解析:

[javascript]?view plaincopy

<script>??

????????alert(test);//undefined??

????????var?test="this?is?test";??

????????alert(test);//this?is?test??

</script>??

在var?test=“test”，之前就調(diào)用alert彈出test，而沒有?報(bào)test未定義的錯(cuò)誤，而是彈出了undefined，可見在js執(zhí)行之前就預(yù)先把var?test；解析到內(nèi)存，所以不會(huì)報(bào)錯(cuò)，為什么會(huì)彈出undefined是因?yàn)?#xff0c;只是把var?test的定義預(yù)先解析到內(nèi)存，并沒有給變量賦值；

[javascript]?view plaincopy

var?test="this?is?test";??

當(dāng)我們執(zhí)行完這句話的時(shí)候，就完成了賦值，所以再次調(diào)用alert就彈出this?is?test

?

接下來繼續(xù)看：變量和函數(shù)重名的時(shí)候會(huì)是什么情況？

[javascript]?view plaincopy

<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>??

這段代碼證明了，當(dāng)函數(shù)名和變量名一樣的時(shí)候，alert(test);調(diào)用的是函數(shù)function?test()?的指針，而不是調(diào)用的變量var?test;?所以function的預(yù)解析?優(yōu)先級(jí)?高于var（個(gè)人覺得）

?

接下來說說“??解析執(zhí)行環(huán)境?”是什么意思？？看下面的例子

?

[javascript]?view plaincopy

<script>??

????????function?test(){??

????????????var?msg?='This?is?test';??

????????}??

????????alert(msg);?//?報(bào)錯(cuò)msg未定義??

</script>??

?

可能有人會(huì)有疑問了，按照上面說的js不是會(huì)預(yù)解析function?和?var?msg嗎，我在function?里面定義了var?msg?，那為什么調(diào)用回報(bào)錯(cuò)那？？？

答案就和我們上面提到的?“解析執(zhí)行環(huán)境”?有關(guān)系，在js執(zhí)行之前是會(huì)預(yù)解析function?和var?沒錯(cuò)，但是在本例中?他們“解析執(zhí)行環(huán)境”不同.

Function?test是在一個(gè)全局的環(huán)境中，而msg是function??test中定義的一個(gè)局部變量，msg的“解析執(zhí)行環(huán)境”是在function?test這個(gè)函數(shù)里面(這里可以理解為function?test里的局部環(huán)境)，所以當(dāng)我們?cè)谌诌@個(gè)環(huán)境中alert(msg),的時(shí)候，并沒有定義msg這個(gè)變量或者函數(shù)，所以就報(bào)錯(cuò)了；

為了進(jìn)一步理解，把上面的例子加以修改

?

[javascript]?view plaincopy

<script>??

????????alert(msg);?//?undefined??

????????function?test()??

????????{??

????????????alert(msg2);//undefined??

????????????var?msg2?='This?is?test';??

????????}??

?????????var?msg?=?"123";??

???????test();???

?</script>??

這個(gè)例子，js在執(zhí)行之前預(yù)解析，解析全局的環(huán)境，解析到function?test?和?var?msg?；所以alert(msg);會(huì)彈出undefined；

?然后當(dāng)程序執(zhí)行到test();?的時(shí)候會(huì)進(jìn)入function?test里面去，也就是進(jìn)入function?test?的局部環(huán)境去?預(yù)解析，這時(shí)候解析到?var?msg2，所以也彈出了undefined；

為了理解的更清楚，可以用IE的F12打個(gè)斷點(diǎn)看一下

?

程序開始預(yù)解析的時(shí)候，實(shí)在Global這個(gè)全局的執(zhí)行環(huán)境中，解析到了function?test?和msg

?

當(dāng)我們執(zhí)行test()的時(shí)候，就會(huì)進(jìn)入function?test里面這個(gè)局部執(zhí)行環(huán)境去解析了

?

上圖可以看到黃色的箭頭?有原來的Global?執(zhí)行環(huán)境，變成了test則個(gè)局部執(zhí)行環(huán)境了，然后再function?test這個(gè)局部執(zhí)行環(huán)境中預(yù)解析，此時(shí)就解析到了?var?msg2?這個(gè)變量

?

?

到這應(yīng)該可以理解“解析執(zhí)行環(huán)境”這句話了吧，如果還不明白自己動(dòng)手搞了例子，打個(gè)斷點(diǎn)debug一下下面這段代碼，應(yīng)該就清楚了！

[javascript]?view plaincopy

<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>標(biāo)簽按照<script>塊依次解析”?這句話是什么意思那？

我們的代碼中可能會(huì)有多個(gè)<script>...</script>標(biāo)簽，每一個(gè)<script>...</script>標(biāo)簽我們認(rèn)為是一個(gè)<script>塊；js的預(yù)解析式按照<script>塊來進(jìn)行的；也就是說js預(yù)解析不會(huì)跨<script>塊去進(jìn)行預(yù)解析，什么意思那？看下面代碼

?

[javascript]?view plaincopy

<script>??

????????alert(msg);??

????????//test();??

</script>??

<script>??

????????var?msg?="test";??

????????/*?function?test(){?

?????????alert("this?is?function");?

?????????}*/??

</script>??

這里有兩個(gè)script塊，他們是按照順序進(jìn)行預(yù)解析的，我們?cè)诘诙€(gè)script塊中定義的var?msg，而在第一個(gè)script塊中alert(msg)

顯然在第一個(gè)script快中并沒有預(yù)解析到一個(gè)叫msg的變量或者函數(shù)，而js又不會(huì)跨到第二個(gè)script塊去解析，所以就報(bào)錯(cuò)msg未定義

函數(shù)function?test?也一樣

?

?

如果把兩個(gè)script塊調(diào)換一下位置，結(jié)果就不一樣了

[javascript]?view plaincopy

<script>??

????????var?msg?="test";??

????????function?test(){??

????????????alert("this?is?function");??

????????}??

</script>??

<script>??

??????alert(msg);??//?test??

??????test();?//?this?is?function??

</script>??

script塊順序進(jìn)行預(yù)解析，當(dāng)?shù)谝粋€(gè)script塊預(yù)解析完，會(huì)解析到var?msg?和function?test，

當(dāng)再第二個(gè)script塊中調(diào)用alert(msg);和test();時(shí)上面的js程序已經(jīng)執(zhí)行完畢了，自然會(huì)彈出?test?和this?is?function

?

總結(jié)

以上是生活随笔為你收集整理的WEB前端学习一 JS预解释的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。