扣丁學(xué)堂HTML5培訓(xùn)簡(jiǎn)述Javascript中的void操作符

今天扣丁學(xué)堂小編給大家總結(jié)一下關(guān)于HTML5培訓(xùn)經(jīng)常在a標(biāo)簽中看到href="javascript:void(0)，但是并沒有認(rèn)真的研究過，正好看到了這篇文章，漲漲姿勢(shì)。

由于JS表達(dá)式偏啰嗦，于是最近便開始采用Coffeescript來減輕負(fù)擔(dān)。舉個(gè)栗子，當(dāng)我想取屋子里的第一條dog時(shí)，首先要判斷house對(duì)象是否存在，然后再判斷house.dogs是否存在，最后取house.dogs[0]。在JS需要這么寫

vardog=(typeofhouse!=='undefined&&house!==null)&&house.dogs&&house.dogs[0]

在Coffee中，我只需要這么寫：

dog=house?.dogs?[0];

寫到這里，讀者會(huì)問，這跟標(biāo)題《Javascript中的void》有一毛錢關(guān)系？Coffee的本質(zhì)就是JS，之所以Coffee能工作的很好，是因?yàn)樗沙隽烁咝Ф医训腏S代碼，我們可以看看它的生成結(jié)果。

vardog,_ref;

dog=typeofhouse!=="undefined"&&house!==null?(_ref=house.dogs)!=null?_ref[0]:void0:void0;

短短一行Coffee代碼生成出了如此長(zhǎng)的JS代碼，看上去似乎比我最前面自己用JS寫的更靠譜更安全，末尾還出來了兩個(gè)void0，這究竟是何方神圣？

結(jié)構(gòu)化一下上面的例子：

dog=(typeofhouse!=="undefined"&&house!==null)?

((_ref=house.dogs)!=null?_ref[0]:void0)

:void0;

如果house未定義或house為null時(shí)，返回void0

如果house.dogs為null時(shí)，返回void0

可void0究竟是什么值，這個(gè)倒很容易測(cè)試:

typeofvoid0//得到"undefined"

console.log(void0)//輸出undefined

似乎void0就是undefined了，但這樣子路數(shù)太野，也不夠嚴(yán)謹(jǐn)，即無法回答：void100,voidhello(),voidi++這無數(shù)可能組合的值是什么？

我們來瞅瞅規(guī)范是怎么說的吧。

規(guī)范是這么說的

在ECMAScript262規(guī)范，有如下描述：

ThevoidOperator

TheproductionUnaryExpression:voidUnaryExpressionisevaluatedasfollows:

LetexprbetheresultofevaluatingUnaryExpression.

CallGetValue(expr).

Returnundefined.

NOTE:GetValuemustbecalledeventhoughitsvalueisnotusedbecauseitmayhaveobservableside-effects.

搬譯一下：

void操作符

產(chǎn)生式UnaryExpression:voidUnaryExpression按如下流程解釋:

令expr為解釋執(zhí)行UnaryExpression的結(jié)果。

調(diào)用GetValue(expr).

返回undefined.

注意：GetValue一定要調(diào)用，即使它的值不會(huì)被用到，但是這個(gè)表達(dá)式可能會(huì)有副作用(side-effects)。

重點(diǎn)在于：無論void后的表達(dá)式是什么，void操作符都會(huì)返回undefined.因此上面由Coffee編譯出來的代碼我們可以認(rèn)為是這樣的：

dog=(typeofhouse!=="undefined"&&house!==null)?

((_ref=house.dogs)!=null?_ref[0]:undefined)

:undefined;

問題來了，既然(void0)===undefined，那直接寫undefined不就行了么？

為什么要用void？

因?yàn)閡ndefined在javascript中不是保留字。換言之，你可以寫出：

functionjoke(){

varundefined="helloworld";

console.log(undefined);//會(huì)輸出"helloworld"

}

console.log(undefined);//輸出undefined

對(duì)的，你可以在一個(gè)函數(shù)上下文內(nèi)以u(píng)ndefined做為變量名，于是在這個(gè)上下文寫的代碼便只能通過從全局作用域來取到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便成了通用準(zhǔn)則。如underscore.js里的isUndefined便是這么寫的：

_.isUndefined=function(obj){

returnobj===void0;

}

除了采用void能保證取到undefined值以外，還有其它方法嗎？有的，還有一種方式是通過函數(shù)調(diào)用。如AngularJS的源碼里就用這樣的方式：

(function(window,document,undefined){

//.....

})(window,document);

通過不傳參數(shù)，確保了undefined參數(shù)的值是一個(gè)undefined。

其它作用

除了取undefined外，void還有什么其它用處嗎？

還有一個(gè)常見的功能，填充href。下面是一個(gè)微博截圖，它的轉(zhuǎn)發(fā),收藏，討論都是超鏈接，但是用戶并不希望點(diǎn)擊它們會(huì)跳轉(zhuǎn)到另一個(gè)頁面，而是引發(fā)出一些交互操作。

理論上而言，這三個(gè)超鏈接都是沒有URL的，但如果不寫的話，呵呵，點(diǎn)擊它會(huì)刷新整個(gè)頁面。于是便用上了href="javascript:void(0)的方式，確保點(diǎn)擊它會(huì)執(zhí)行一個(gè)純粹無聊的void(0)。

另一種情況是，如果我們要生成一個(gè)空的src的image，最好的方式似乎也是src='javascript:void(0)'，參見StackOverflow上的這個(gè)問題：What’sthevalidwaytoincludeanimagewithnosrc?

寫在最后

回到void的定義，有一句話特別讓人迷惑：

注意：GetValue一定要調(diào)用，即使它的值不會(huì)被用到，但是這個(gè)表達(dá)式可能會(huì)有副作用(side-effects)。

這是什么意思？這表示無論void右邊的表達(dá)式是什么，都要對(duì)其求值。這么說可能不太明白，在知乎上有過闡述關(guān)于js中void，既然返回永遠(yuǎn)是undefined，那么GetValue有啥用？，我且拾人牙慧，代入一個(gè)場(chǎng)景，看代碼：

varhappiness=10;

vargirl={

getwhenMarry(){

happiness--;

return1/0;//Infinity

},

gethappiness(){

returnhappiness;

}

};

console.log(girl.whenMarry);//調(diào)用了whenMarry的get方法

console.log(girl.happiness);//9

voidgirl.whenMarry;//調(diào)用了whenMarry的get方法

console.log(girl.happiness);//8

deletegirl.whenMarry;//沒有調(diào)用whenMarry的get方法

console.log(girl.happiness);//還是8

上述代碼定義了一個(gè)大齡文藝女青年，每被問到什么時(shí)候結(jié)婚呀(whenMarry)，happiness都會(huì)減1。從執(zhí)行情況可以看出，無論是普通訪問girl.whenMarry，還是voidgirl.whenMarry都會(huì)使她的happiness--。而如果把void換成delete操作符寫成deletegirl.whenMarry，她的happiness就不會(huì)減了，因?yàn)閐elete操作符不會(huì)對(duì)girl.whenMarry求值。

總結(jié)

void有如下作用：

通過采用void0取undefined比采用字面上的undefined更靠譜更安全，應(yīng)該優(yōu)先采用void0這種方式。

填充<a>的href確保點(diǎn)擊時(shí)不會(huì)產(chǎn)生頁面跳轉(zhuǎn);填充<image>的src，確保不會(huì)向服務(wù)器發(fā)出垃圾請(qǐng)求。

(href和src中采用javascript：偽協(xié)議，導(dǎo)致瀏覽器會(huì)執(zhí)行后面的代碼，根據(jù)返回值來決定下一步操作，當(dāng)返回值是undefined時(shí)瀏覽器不會(huì)把返回值替換頁面里的內(nèi)容，也就不會(huì)導(dǎo)致href和src的值發(fā)生改變)

最后想要工作不累就要不斷的提升自己的技能，請(qǐng)關(guān)注扣丁學(xué)堂HTML5培訓(xùn)官網(wǎng)、微信等平臺(tái)，扣丁學(xué)堂IT職業(yè)在線學(xué)習(xí)教育平臺(tái)為您提供權(quán)威的HTML5視頻教程系統(tǒng)，通過千鋒扣丁學(xué)堂金牌講師在線錄制的第一套自適應(yīng)HTML5在線視頻課程系統(tǒng)，讓你快速掌握HTML5從入門到精通開發(fā)實(shí)戰(zhàn)技能?？鄱W(xué)堂H5技術(shù)交流群：692172929。微信號(hào)：codingbb