HTML5培訓之淺談Javascript中的void操作符
2018-04-24 13:24:55
1534瀏覽
今天扣丁學堂小編給大家總結一下關于HTML5培訓經常在a標簽中看到href="javascript:void(0)，但是并沒有認真的研究過，正好看到了這篇文章，漲漲姿勢。
由于JS表達式偏啰嗦，于是最近便開始采用Coffeescript來減輕負擔。舉個栗子，當我想取屋子里的第一條dog時，首先要判斷house對象是否存在，然后再判斷house.dogs是否存在，最后取house.dogs[0]。在JS需要這么寫
vardog=(typeofhouse!=='undefined&&house!==null)&&house.dogs&&house.dogs[0]
在Coffee中，我只需要這么寫：
dog=house?.dogs?[0];
寫到這里，讀者會問，這跟標題《Javascript中的void》有一毛錢關系？Coffee的本質就是JS，之所以Coffee能工作的很好，是因為它生成出了高效而且健壯的JS代碼，我們可以看看它的生成結果。
vardog,_ref;
dog=typeofhouse!=="undefined"&&house!==null?(_ref=house.dogs)!=null?_ref[0]:void0:void0;
短短一行Coffee代碼生成出了如此長的JS代碼，看上去似乎比我最前面自己用JS寫的更靠譜更安全，末尾還出來了兩個void0，這究竟是何方神圣？
結構化一下上面的例子：
dog=(typeofhouse!=="undefined"&&house!==null)?
((_ref=house.dogs)!=null?_ref[0]:void0)
:void0;
如果house未定義或house為null時，返回void0
如果house.dogs為null時，返回void0
可void0究竟是什么值，這個倒很容易測試:
typeofvoid0//得到"undefined"
console.log(void0)//輸出undefined
似乎void0就是undefined了，但這樣子路數(shù)太野，也不夠嚴謹，即無法回答：void100,voidhello(),voidi++這無數(shù)可能組合的值是什么？
我們來瞅瞅規(guī)范是怎么說的吧。
規(guī)范是這么說的
在ECMAScript262規(guī)范，有如下描述：
ThevoidOperator
TheproductionUnaryExpression:voidUnaryExpressionisevaluatedasfollows:
LetexprbetheresultofevaluatingUnaryExpression.
CallGetValue(expr).
Returnundefined.
NOTE:GetValuemustbecalledeventhoughitsvalueisnotusedbecauseitmayhaveobservableside-effects.
搬譯一下：
void操作符
產生式UnaryExpression:voidUnaryExpression按如下流程解釋:
令expr為解釋執(zhí)行UnaryExpression的結果。
調用GetValue(expr).
返回undefined.
注意：GetValue一定要調用，即使它的值不會被用到，但是這個表達式可能會有副作用(side-effects)。
重點在于：無論void后的表達式是什么，void操作符都會返回undefined.因此上面由Coffee編譯出來的代碼我們可以認為是這樣的：
dog=(typeofhouse!=="undefined"&&house!==null)?
((_ref=house.dogs)!=null?_ref[0]:undefined)
:undefined;
問題來了，既然(void0)===undefined，那直接寫undefined不就行了么？
為什么要用void？
因為undefined在javascript中不是保留字。換言之，你可以寫出：
functionjoke(){
varundefined="helloworld";
console.log(undefined);//會輸出"helloworld"
}
console.log(undefined);//輸出undefined
對的，你可以在一個函數(shù)上下文內以undefined做為變量名，于是在這個上下文寫的代碼便只能通過從全局作用域來取到undefined，如：
window.undefined//瀏覽器環(huán)境
GLOBAL.undefined//Node環(huán)境
但要注意的是，即便window,GLOBAL仍然可以在函數(shù)上下文被定義，故從window/GLOBAL上取undefined并不是100%可靠的做法。如：
functionx(){
varundefined='helloworld',
f={},
window={
'undefined':'joke'
};
console.log(undefined);//helloworld
console.log(window.undefined);//joke
console.log(f.a===undefined);//false
console.log(f.a===void0);//true
}
于是，采用void方式獲取undefined便成了通用準則。如underscore.js里的isUndefined便是這么寫的：
_.isUndefined=function(obj){
returnobj===void0;
}
除了采用void能保證取到undefined值以外，還有其它方法嗎？有的，還有一種方式是通過函數(shù)調用。如AngularJS的源碼里就用這樣的方式：
(function(window,document,undefined){
//.....
})(window,document);
通過不傳參數(shù)，確保了undefined參數(shù)的值是一個undefined。
其它作用
除了取undefined外，void還有什么其它用處嗎？
還有一個常見的功能，填充href。下面是一個微博截圖，它的轉發(fā),收藏，討論都是超鏈接，但是用戶并不希望點擊它們會跳轉到另一個頁面，而是引發(fā)出一些交互操作。
理論上而言，這三個超鏈接都是沒有URL的，但如果不寫的話，呵呵，點擊它會刷新整個頁面。于是便用上了href="javascript:void(0)的方式，確保點擊它會執(zhí)行一個純粹無聊的void(0)。
另一種情況是，如果我們要生成一個空的src的image，最好的方式似乎也是src='javascript:void(0)'，參見StackOverflow上的這個問題：What’sthevalidwaytoincludeanimagewithnosrc?
寫在最后
回到void的定義，有一句話特別讓人迷惑：
注意：GetValue一定要調用，即使它的值不會被用到，但是這個表達式可能會有副作用(side-effects)。
這是什么意思？這表示無論void右邊的表達式是什么，都要對其求值。這么說可能不太明白，在知乎上有過闡述關于js中void，既然返回永遠是undefined，那么GetValue有啥用？，我且拾人牙慧，代入一個場景，看代碼：
varhappiness=10;
vargirl={
getwhenMarry(){
happiness--;
return1/0;//Infinity
},
gethappiness(){
returnhappiness;
}
};
console.log(girl.whenMarry);//調用了whenMarry的get方法
console.log(girl.happiness);//9
voidgirl.whenMarry;//調用了whenMarry的get方法
console.log(girl.happiness);//8
deletegirl.whenMarry;//沒有調用whenMarry的get方法
console.log(girl.happiness);//還是8
上述代碼定義了一個大齡文藝女青年，每被問到什么時候結婚呀(whenMarry)，happiness都會減1。從執(zhí)行情況可以看出，無論是普通訪問girl.whenMarry，還是voidgirl.whenMarry都會使她的happiness--。而如果把void換成delete操作符寫成deletegirl.whenMarry，她的happiness就不會減了，因為delete操作符不會對girl.whenMarry求值。
總結
void有如下作用：
通過采用void0取undefined比采用字面上的undefined更靠譜更安全，應該優(yōu)先采用void0這種方式。
填充<a>的href確保點擊時不會產生頁面跳轉;填充<image>的src，確保不會向服務器發(fā)出垃圾請求。
(href和src中采用javascript：偽協(xié)議，導致瀏覽器會執(zhí)行后面的代碼，根據(jù)返回值來決定下一步操作，當返回值是undefined時瀏覽器不會把返回值替換頁面里的內容，也就不會導致href和src的值發(fā)生改變)
最后想要工作不累就要不斷的提升自己的技能，請關注扣丁學堂HTML5培訓官網、微信等平臺，扣丁學堂IT職業(yè)在線學習教育平臺為您提供權威的HTML5視頻教程系統(tǒng)，通過千鋒扣丁學堂金牌講師在線錄制的第一套自適應HTML5在線視頻課程系統(tǒng)，讓你快速掌握HTML5從入門到精通開發(fā)實戰(zhàn)技能?？鄱W堂H5技術交流群：559883758
【關注微信公眾號獲取更多學習資料】
查看更多關于“HTML5開發(fā)技術資訊”的相關文章>>
標簽:
HTML5視頻教程
HTML5全棧開發(fā)
HTML5培訓
HTML5在線視頻
前端開發(fā)
Javascript視頻教程
返回頂部