本文實(shí)例講述了JavaScript預(yù)解析及相關(guān)技巧。分享給大家供大家參考，具體如下：

變量

同樣，以這兩個(gè)小例子的錯(cuò)誤對(duì)比提示開(kāi)始。

alert(y1);     //代碼段1
var y1 = 'dddd';
alert(y2);     //代碼段2 // alert(typeof y2);
y2 = 'xxxxx';

先思考一下，為什么一個(gè)會(huì)提示 undefined , 一個(gè)卻拋出變量未定義的錯(cuò)。。先看JavaScript的解析過(guò)程。

javascript在執(zhí)行過(guò)程之前，會(huì)做一件事件“預(yù)解析”。解析引擎會(huì)以塊為單位級(jí)別，執(zhí)行所有 var 變量的創(chuàng)建，并賜予它們一個(gè)初始值：undefined。這樣一來(lái)，第一個(gè)例子為什么會(huì)彈出undefined的原因就顯而易見(jiàn)了。

所以第一段代碼其實(shí)就等價(jià)于

var y1;
alert(typeof y1); //很自然，它此時(shí)值為undefined
y1 = 'dddd';

那第二段代碼為什么又拋錯(cuò)呢，此時(shí)就不再屬于“預(yù)解析”階段了，(在這里我假設(shè)瀏覽器遇到一個(gè)script標(biāo)簽時(shí)只做兩件事：預(yù)解析和執(zhí)行，其實(shí)不 只這兩件事情)，而處于執(zhí)行階段，拋錯(cuò)原因在于js在執(zhí)行段狀態(tài)并不知曉y2的狀態(tài)（預(yù)解析階段沒(méi)有捕獲到y(tǒng)2的任何信息），當(dāng)然就拋出未定義的錯(cuò)誤信 息。這里又牽扯到另一個(gè)問(wèn)題： js 是弱類(lèi)型語(yǔ)言，變量不定義可以用，那為什么這里又拋出為定義錯(cuò)誤呢。

事出總有因，javascript總有很多自身奇怪的特性，有一個(gè)叫變量的讀寫(xiě)不均等。未定義的變量，僅僅是可寫(xiě)，并不可讀。何為可寫(xiě)，每個(gè)人都熟悉這樣的寫(xiě)法：

y2 = 'exam';  
//在沒(méi)出現(xiàn)它的定義操作之前（即在它還沒(méi)有自己的scope之前）該操作會(huì)將這段代碼認(rèn)為是定義一個(gè)全局變量，在window上注冊(cè)一個(gè)屬性y2，并賦值為exam

但在對(duì)它的讀操作，js引擎搜尋不到它的任何相關(guān)信息，就以自己的脾氣行事，毫不客氣拋一個(gè)未定義的錯(cuò)，這是js的游戲規(guī)則。還有但是，那為什么卻 可以獲取它的類(lèi)型呢。還記得 js對(duì)對(duì)象的操作吧。如果訪(fǎng)問(wèn)對(duì)象一個(gè)不存在的屬性及類(lèi)型，會(huì)提示undefined, (因?yàn)樗?dāng)前是window對(duì)象的一個(gè)屬性)。

再注：這里需要區(qū)分， 變量的讀寫(xiě)不均等 僅用于變量，讀取所有對(duì)象的屬性，不存在該特性，如果不存在，會(huì)提示undefined。

結(jié)論

到這里，我的思考結(jié)果： 對(duì)于變量和對(duì)象的寫(xiě)操作，他們有一定的類(lèi)似之處.但是讀操作，各有各的一套規(guī)則,正因?yàn)榇耍杂辛松厦娴膯?wèn)題。
這樣一來(lái)，下面這個(gè)題應(yīng)該就很容易得到答案了吧。

if (!('a' in window)) {
  var a = 1;
}
alert(a);

函數(shù)

引申一下，function. 還記得上面提到的預(yù)解析，在javascript的預(yù)解析中，除了對(duì)var 變量的預(yù)定義，還包括了提取對(duì)函數(shù)的定義，所以可以在script的任何地方定義函數(shù)，在任何地方調(diào)用。不限于它之前.

但函數(shù)的定義方式，包括了一種叫字面量定義法, 用var的方法聲明function.看下面

alert(typeof y3); //結(jié)果?
var y3 = function (){ console.log('1'); }

還記得這個(gè)約定吧：調(diào)用必須出現(xiàn)在聲明之后，為什么呢，如果理解了上面，其實(shí)這里答案已經(jīng)明了。javascript 引擎在預(yù)解析 var 時(shí) 會(huì)給他們一個(gè)初始值 undefined，這樣一來(lái)，如果我們?cè)谒穆暶髦罢{(diào)用它，javascript 引擎還沒(méi)拿到它的真實(shí)值，自然會(huì)報(bào)"xxx is not a function" 的錯(cuò).這也理清了為什么同為函數(shù)聲明，一個(gè)卻關(guān)系到聲明和調(diào)用的順序，一個(gè)卻無(wú)這樣的約束。

結(jié)論

它是函數(shù)，是js執(zhí)行，動(dòng)態(tài)修改的結(jié)果，依然遵循了變量的預(yù)解析規(guī)則（在上面alert的時(shí)候，它還并沒(méi)有拿到字面量函數(shù)的信息）。
如果是兩個(gè)混合呢?？聪旅? 同時(shí)存在了為y4的變量和function。

alert(typeof y4); //結(jié)果?
function y4(){
  console.log('y4')
}
var y4;

因?yàn)?javascript 在預(yù)解析時(shí)function的聲明優(yōu)先級(jí)高的緣故，所以y4自然為function類(lèi)型, 但是在當(dāng)y4 賦值之后（此時(shí)js引擎處于執(zhí)行過(guò)程中），它對(duì)js的賦值操作將會(huì)覆蓋function的聲明。所以：

alert(typeof y5);
var y5 = 'angle';
function y5(){
  console.log('ghost');  
}
alert(y5);

第一次alert結(jié)果，因?yàn)樗幱趈s 執(zhí)行過(guò)程中的頂端，所以為 function。 第二次再alert時(shí)， 它的值已經(jīng)被重寫(xiě)為5（不要被function的定義位置在下所迷惑。）

從js的解析和執(zhí)行分開(kāi)來(lái)想，才發(fā)現(xiàn)眼前豁然開(kāi)朗，很多問(wèn)題的答案都很自然得浮出水面,正如那篇文章作者所說(shuō)，"一旦理解了執(zhí)行環(huán)境、調(diào)用對(duì)象、閉包、詞法作用域、作用域鏈這些概念，JS語(yǔ)言的很多現(xiàn)象都能迎刃而解。"

現(xiàn)在再看，即使在這個(gè)存在著很多不可思議的語(yǔ)言中，也有很多可以追溯到它的緣由。

如何更好的做參數(shù)判斷

討論了上面那么多，那如何讓它更貼近于實(shí)際開(kāi)發(fā)呢，既然javascript的讀寫(xiě)不均等性，如何才能避免在不報(bào)錯(cuò)的情況下做參數(shù)判斷呢。

eg:

if(cusVar){ //這里的判斷，是不是存在隱含的問(wèn)題呢。 }

如何嚴(yán)謹(jǐn)一些呢。

if(window['cusVar']) { //保證它不報(bào)錯(cuò)。
  //或者這樣的判斷也是可行的 window.cusVar | typeof cusVar !== 'undefined'
  //干活咯
}

最后補(bǔ)充又一個(gè)小quiz, (理解 預(yù)解析與執(zhí)行的分離)

var y7 = 'test';
function fun1(){
  alert(y7);
  var y7 = 'sex';
}
fun1();

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論