JavaScript定義變量和變量?jī)?yōu)先級(jí)問(wèn)題探討
看下面的代碼:
if (!("aa" in window)) {
alert('oh my god');
var aa = 1;
}
alert("aa" in window);
alert(aa);
回答以下問(wèn)題:
會(huì)報(bào)錯(cuò)嗎?會(huì)彈出幾次?
第2個(gè)alert是true還是false?
第3個(gè)alert彈出什么?
為什么?
思考下,然后測(cè)試下,如果你回答正確,那么后面的文章就不用看了。
-----------------------------
在JS里定義變量太簡(jiǎn)單了,直接一個(gè)var ,甚至不用var都可以:
var a = 1;
這里a就是變量名,1就是變量值。唉,這個(gè)太基礎(chǔ)了??聪旅娴拇a:
var a;
alert(a);
以firebug測(cè)試,會(huì)彈出undefined,這個(gè)是大家很熟悉的一個(gè)字符串了,貌似表示變量未定義。但我覺(jué)得,我已經(jīng)var了啊,這就是定義了嘛,只是沒(méi)有附值而已。
我們來(lái)個(gè)真正的沒(méi)有定義的:
alert(a);
沒(méi)錯(cuò),就是直接alert一個(gè)根本沒(méi)有出現(xiàn)過(guò)的變量,這會(huì)如何?
firebug直接報(bào)錯(cuò)了:a is not defined.意思是a沒(méi)有定義。這個(gè)結(jié)合前面的代碼來(lái)看,讓人困惑。這個(gè)沒(méi)有定義和前面的未定義有什么不同呢?
其實(shí)前面的代碼等價(jià)于這樣的:
var a = undefined;
alert(a);
也就是說(shuō),當(dāng)聲明變量而不賦值時(shí),JS會(huì)給變量傳一個(gè)undefined值,注意,這是個(gè)“值”,說(shuō)明a已經(jīng)有值了,這個(gè)值就叫“未定義”。
而后面的直接alert,變量從沒(méi)有出現(xiàn)過(guò),也就是說(shuō)這才是真正的未定義。
簡(jiǎn)單的說(shuō):JS中不存在沒(méi)有值的變量,變量聲明的時(shí)候就賦值了。
然后我們看下面的代碼:
alert(a);
var a = 1;
這個(gè)代碼會(huì)報(bào)錯(cuò)嗎?因?yàn)樵赼lert的時(shí)候變量a還沒(méi)來(lái)得及出現(xiàn)呀。
但是這樣居然沒(méi)有報(bào)錯(cuò),而是彈出了undefined值。表明變量a已經(jīng)存在了,只是值卻不是我們想要的,而是undefined。這又是個(gè)什么問(wèn)題呢?
因?yàn)関ar 變量聲明和函數(shù)聲明一樣,會(huì)提前,其實(shí)上面的代碼是這樣的:
var a;
alert(a);
a = 1;
這么一來(lái)就懂了。
所以,這個(gè)問(wèn)題的關(guān)鍵在于:var 聲明會(huì)提前到作用域頂端,但附值卻不會(huì)———好糾結(jié)的設(shè)定,不知道為什么要這么搞。個(gè)人覺(jué)得這是JS的一個(gè)缺陷。
現(xiàn)在有一種代碼習(xí)慣,主張把變量聲明一律放在作用域前方,大概就是考慮到這個(gè)——反正就算你不寫(xiě)在前方,JS也會(huì)提前到前方。
現(xiàn)在放出文首問(wèn)題的答案:
只會(huì)彈出兩個(gè)alert,而if里面的alert不會(huì)執(zhí)行,因?yàn)関ar聲明的提前性,導(dǎo)致真正的代碼是這個(gè)樣子:
var aa;
if (!("aa" in window)) {
alert('oh my god');
aa = 1;
}
alert("aa" in window);
alert(aa);
雖然aa為空,但用'aa' in window判斷時(shí)會(huì)為真,因?yàn)閍確實(shí)存在了,而值是undefined。所以if代碼不會(huì)執(zhí)行。后面兩個(gè)alert我就不說(shuō)了。
個(gè)人感覺(jué)這是一個(gè)很無(wú)厘頭的問(wèn)題,我們應(yīng)該了解他的原因,但鄙視他這種陷阱。
上面這個(gè)問(wèn)題也是我寫(xiě)這篇文章的緣由,這段代碼是我從一篇網(wǎng)文里看到的,但他里面沒(méi)有答案,我百撕不得騎姐,跑到stackoverflow上去問(wèn)了才搞清楚。答案就是這篇文章。
但這是很基礎(chǔ)的問(wèn)題啊其實(shí)?。?!
哈哈,原諒我,后面還有一個(gè)問(wèn)題:
var b = {}
alert(b.aa);
alert(b.aa.bb);
這也是一種聲明變量的方式,那么,這段代碼會(huì)報(bào)錯(cuò)嗎?為什么?
- js利用與或運(yùn)算符優(yōu)先級(jí)實(shí)現(xiàn)if else條件判斷表達(dá)式
- 淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)
- 淺談JavaScript中運(yùn)算符的優(yōu)先級(jí)
- Javascript算符的優(yōu)先級(jí)介紹
- 淺析JavaScript中的同名標(biāo)識(shí)符優(yōu)先級(jí)
- JS前端知識(shí)點(diǎn) 運(yùn)算符優(yōu)先級(jí),URL編碼與解碼,String,Math,arguments操作整理總結(jié)
- JS正則表達(dá)式大全(整理詳細(xì)且實(shí)用)
- JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式示例詳解
相關(guān)文章
ZK中使用JS讀取客戶(hù)端txt文件內(nèi)容問(wèn)題
這篇文章主要介紹了ZK中使用JS讀取客戶(hù)端txt文件內(nèi)容問(wèn)題,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法
將HTMLCollection/NodeList/偽數(shù)組轉(zhuǎn)換成數(shù)組的實(shí)現(xiàn)方法,需要的朋友可以參考下。2011-06-06深入學(xué)習(xí)JavaScript中的promise
這篇文章主要介紹了深入學(xué)習(xí)JavaScript中的promise,Promise對(duì)象的主要?途是通過(guò)鏈?zhǔn)秸{(diào)?的結(jié)構(gòu),將原本回調(diào)嵌套的異步處理流程,轉(zhuǎn)化成“對(duì)象.then().then()...”的鏈?zhǔn)浇Y(jié)構(gòu)2022-06-06javascript之水平橫向滾動(dòng)歌詞同步的應(yīng)用
javascript之水平橫向滾動(dòng)歌詞同步的應(yīng)用...2007-05-05使用?JavaScript?Promise?讀取?Github?用戶(hù)數(shù)據(jù)
這篇文章主要介紹了使用JavaScript?Promise讀取Github用戶(hù)數(shù)據(jù),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
下面小編就為大家?guī)?lái)一篇JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法
這篇文章主要介紹了使用webpack將ES6轉(zhuǎn)化ES5的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10javascript中substring()、substr()、slice()的區(qū)別
在js中字符截取函數(shù)有常用的三個(gè)slice()、substring()、substr()了,下面我來(lái)給大家介紹slice()、substring()、substr()函數(shù)在字符截取時(shí)的一些用法與區(qū)別吧。2015-08-08