再探JavaScript作用域
黃金守則第一條:
js沒(méi)有塊級(jí)作用域(你可以自己閉包或其他方法實(shí)現(xiàn)),只有函數(shù)級(jí)作用域,函數(shù)外面的變量函數(shù)里面可以找到,函數(shù)里面的變量外面找不到。
first try:

這是為什么呢??
var a = 10;
function aaa(){//step-4
alert(a);//step-5->執(zhí)行alert,此時(shí)只能找到外面的a=10故彈框10
}
function bbb(){//step-2
var a = 20;
aaa();//step-3
}
//定義了函數(shù)沒(méi)啥用,調(diào)用才是真格的所以這里是step-1
bbb();//step-1
其實(shí)原理大家都懂,應(yīng)該就是易錯(cuò)而已,萬(wàn)變不離其綜。
second try:

這是為什么呢? 因?yàn)榻oa賦值b的時(shí)候,b還沒(méi)有定義,所以a是undefined,b是10.
黃金守則第二條:
變量的查找是就近原則,去尋找var定義的變量,當(dāng)就近沒(méi)有找到的時(shí)候就去查找外層。
look:

這是為什么呢、? 這里面有兩個(gè)原因,一是預(yù)解析,二是就近查找。
var a=10;
function aaa(){
alert(a);//undefined,查找a的時(shí)候會(huì)現(xiàn)在函數(shù)內(nèi)查找,由于預(yù)解析的作用,此時(shí)的a是undefined,因此永遠(yuǎn)不會(huì)去查找外面的10了
var a = 20;
/*預(yù)解析
var a
alert(a);
var a = 20;*/
}
aaa();
attention:

這個(gè)吧,就驗(yàn)證了第二條,雖然是就近原則,但是是就近找var聲明的變量,這個(gè)是因?yàn)闆](méi)有var聲明的變量是全局的,這里只是修改了a的值。所以上面就是因?yàn)樵诤瘮?shù)內(nèi)沒(méi)找到var的a,于是到外面去找了,一找就找到了,于是a就alert出10了;不過(guò)沒(méi)錯(cuò)的是a=20后,a確實(shí)為20了,只不過(guò)alert的時(shí)候還沒(méi)有執(zhí)行到那~~
看吧~

下面這個(gè)例子,更加驗(yàn)證了js的函數(shù)作用域 而已:

這是因?yàn)樵赼lert(a)的時(shí)候,bbb函數(shù)中的a確實(shí)為20 ,可是它對(duì)于這時(shí)的alert(a)這句話(huà)來(lái)說(shuō)是局部的,alert(a)根本找不到bbb函數(shù)中的a,所以在aaa函數(shù)中它找不到a,于是乎去外面找,一找,就找到了10。
黃金守則第三條:
當(dāng)參數(shù)跟局部變量重名時(shí),優(yōu)先級(jí)是等同的。
例:

還有:傳參時(shí),基本類(lèi)型傳值,引用類(lèi)型傳引用。(但是重新賦值之后就不是這樣了喔)
var a = 5; var b = a; b +=3; alert(a);//5 var a = [1,2,3]; var b=a; b.push(4); alert(a);//[1,2,3,4];
上面代碼沒(méi)有問(wèn)題,但是下面就不一樣啦。

因?yàn)閎被重新賦值了,不指向a了。
此外,參數(shù)與變量的作用域是相似的:

對(duì)比上下這兩個(gè):

上面是參數(shù)是基本類(lèi)型,只傳了值進(jìn)去,下面的傳個(gè)引用類(lèi)型:(同樣也包含重新賦值的情況)


相關(guān)文章
uni-app自定義組件components導(dǎo)入失敗或頁(yè)面不顯示文本等解決方法
這篇文章主要給大家介紹了關(guān)于uni-app自定義組件components導(dǎo)入失敗或頁(yè)面不顯示文本等的解決方法,眾所周知Uni-app支持使用自定義組件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
javascript數(shù)組里的27個(gè)方法總合詳解
這篇文章主要為大家詳細(xì)介紹了javascript數(shù)組里的方法27個(gè)總合,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-02-02
Javascript & DHTML 實(shí)例編程(教程)DOM基礎(chǔ)和基本API
Javascript & DHTML 實(shí)例編程(教程)DOM基礎(chǔ)和基本API...2007-06-06
深入理解JavaScript中的對(duì)象復(fù)制(Object Clone)
下面小編就為大家?guī)?lái)一篇深入理解JavaScript中的對(duì)象復(fù)制(Object Clone)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JavaScript中函數(shù)的常用寫(xiě)法及調(diào)用方法
這篇文章介紹了JavaScript中函數(shù)的常用寫(xiě)法及調(diào)用方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
深入理解JavaScript系列(48):對(duì)象創(chuàng)建模式(下篇)
這篇文章主要介紹了深入理解JavaScript系列(48):對(duì)象創(chuàng)建模式(下篇),本篇主要是介紹創(chuàng)建對(duì)象方面的模式的下篇,利用各種技巧可以極大地避免了錯(cuò)誤或者可以編寫(xiě)出非常精簡(jiǎn)的代碼,需要的朋友可以參考下2015-03-03
Javascript之BOM(window對(duì)象)詳解
下面小編就為大家?guī)?lái)一篇Javascript之BOM(window對(duì)象)詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

