JavaScript預解析及相關技巧有哪些

這篇文章主要介紹了JavaScript預解析及相關技巧有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript預解析及相關技巧有哪些文章都會有所收獲，下面我們一起來看看吧。

變量

同樣，以這兩個小例子的錯誤對比提示開始。

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

先思考一下，為什么一個會提示 undefined , 一個卻拋出變量未定義的錯。。先看JavaScript的解析過程。

javascript在執行過程之前，會做一件事件“預解析”。解析引擎會以塊為單位級別，執行所有 var 變量的創建，并賜予它們一個初始值：undefined。這樣一來，第一個例子為什么會彈出undefined的原因就顯而易見了。

所以第一段代碼其實就等價于

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

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

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

y2 = 'exam';  
//在沒出現它的定義操作之前（即在它還沒有自己的scope之前）該操作會將這段代碼認為是定義一個全局變量，在window上注冊一個屬性y2，并賦值為exam

但在對它的讀操作，js引擎搜尋不到它的任何相關信息，就以自己的脾氣行事，毫不客氣拋一個未定義的錯，這是js的游戲規則。還有但是，那為什么卻 可以獲取它的類型呢。還記得 js對對象的操作吧。如果訪問對象一個不存在的屬性及類型，會提示undefined, (因為它當前是window對象的一個屬性)。

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

結論

到這里，我的思考結果： 對于變量和對象的寫操作，他們有一定的類似之處.但是讀操作，各有各的一套規則,正因為此，所以有了上面的問題。
這樣一來，下面這個題應該就很容易得到答案了吧。

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

函數

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

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

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

還記得這個約定吧：調用必須出現在聲明之后，為什么呢，如果理解了上面，其實這里答案已經明了。javascript 引擎在預解析 var 時 會給他們一個初始值 undefined，這樣一來，如果我們在它的聲明之前調用它，javascript 引擎還沒拿到它的真實值，自然會報"xxx is not a function" 的錯.這也理清了為什么同為函數聲明，一個卻關系到聲明和調用的順序，一個卻無這樣的約束。

結論

它是函數，是js執行，動態修改的結果，依然遵循了變量的預解析規則（在上面alert的時候，它還并沒有拿到字面量函數的信息）。
如果是兩個混合呢。看下面, 同時存在了為y4的變量和function。

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

因為 javascript 在預解析時function的聲明優先級高的緣故，所以y4自然為function類型, 但是在當y4 賦值之后（此時js引擎處于執行過程中），它對js的賦值操作將會覆蓋function的聲明。所以：

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

第一次alert結果，因為它處于js 執行過程中的頂端，所以為 function。 第二次再alert時， 它的值已經被重寫為5（不要被function的定義位置在下所迷惑。）

從js的解析和執行分開來想，才發現眼前豁然開朗，很多問題的答案都很自然得浮出水面,正如那篇文章作者所說，"一旦理解了執行環境、調用對象、閉包、詞法作用域、作用域鏈這些概念，JS語言的很多現象都能迎刃而解。"

現在再看，即使在這個存在著很多不可思議的語言中，也有很多可以追溯到它的緣由。

如何更好的做參數判斷

討論了上面那么多，那如何讓它更貼近于實際開發呢，既然javascript的讀寫不均等性，如何才能避免在不報錯的情況下做參數判斷呢。

eg:

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

如何嚴謹一些呢。

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

最后補充又一個小quiz, (理解 預解析與執行的分離)

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

關于“JavaScript預解析及相關技巧有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript預解析及相關技巧有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。