首頁 > web前端 > js教程 > JavaScript預解析及相關技巧分析_javascript技巧

JavaScript預解析及相關技巧分析_javascript技巧

WBOY
發布: 2016-05-16 15:04:36
原創
1133 人瀏覽過

本文實例講述了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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板