js中作用域的實(shí)例解析
首先,要了解一下作用域的概念:作用--讀、寫,域--范圍或空間。作用域:可用來(lái)進(jìn)行讀、寫操作的范圍或者空間。
其次,再來(lái)看看瀏覽器讀取js文件(script標(biāo)簽內(nèi)的內(nèi)容)的步驟。
第一步:預(yù)解析-----根據(jù)var function 把可能用到的參數(shù)或函數(shù)找出來(lái),放在內(nèi)存里(這相當(dāng)于放到倉(cāng)庫(kù)里面)
例1:
<script>
alert(a)
var a=1
function fn1(){alert(2)}
</script>
根據(jù)var和function可以找到:a fn1
預(yù)解析的過程中會(huì)自動(dòng)給變量賦值undefined,即:a=undefined;而函數(shù)的值就函數(shù)本身,即:fn1=function fn1(){alert(2)}
所以預(yù)解析后:a = undefined, fn1=function fn1(){alert(2)}
如果函數(shù)和變量重名,那么只保留有值的那個(gè)。
例2:
<script>
alert(a)
var a=1
function a(){alert(2)}
var a=10
</script>
根據(jù)var和function可以找到:a a a
預(yù)解析的過程中:a=undefined, a=function a(){alert(2)}, a=undefined
預(yù)解析之后就只有 a=function a(){alert(2)}
例3:
如果例2中var a=10后面還有一個(gè)函數(shù)function a(){alert(4)}
那么預(yù)解析之后的結(jié)果就變成了:a=function a(){alert(4)}。因?yàn)楹笠粋€(gè)有值的會(huì)覆蓋前一個(gè)。
第二步:就是從上而下逐行解讀代碼了
例4:
首先我們知道下面的代碼預(yù)解析的結(jié)果是:a=function a(){alert(4)}
<script>
alert(a) //讀這一行的時(shí)候a=function a(){alert(4)},所以打印出來(lái)的是function a(){alert(4)}
var a=1 //讀這一的行的是后,是給a重新賦值了,所以a=1
alert(a) //讀這一行的時(shí)候a=1,所以打印出來(lái)的是1
function a(){alert(2)} //讀這一行的時(shí)候,沒有對(duì)a重新賦值,也不會(huì)打印任何東西,因?yàn)楹瘮?shù)沒被調(diào)用。
alert(a) //讀這一行的時(shí)候a=1,所以打印出來(lái)的是1
var a=10 //讀這一的行的是后,是給a重新賦值了,所以a=10
alert(a) //讀這一行的時(shí)候a=10,所以打印出來(lái)的是10
function a(){alert(4)} //讀這一行的時(shí)候,沒有對(duì)a重新賦值,也不會(huì)打印任何東西,因?yàn)楹瘮?shù)沒被調(diào)用。
alert(a) //讀這一行的時(shí)候a=10,所以打印出來(lái)的是10
</script>
---------------------上面的內(nèi)容,幫助去理解預(yù)解析的概念,還沒有用到“域”。而對(duì)于預(yù)解析來(lái)說,只要遇到一個(gè)“域”,就會(huì)在這個(gè)“域”內(nèi)發(fā)生預(yù)解析------------------------
例5:
以下代碼預(yù)解析:a=undefined,fn1=funciton fn1(){alert(a)var a=2;},然后開始執(zhí)行代碼
<script>
var a=1 //讀到這一行的時(shí),給a賦值,a=1
funciton fn1(){alert(a);var a=2;} //讀到這一行的時(shí),什么都沒發(fā)生
fn1();//讀到這一行時(shí),函數(shù)被調(diào)用。也分為兩步
//1、函數(shù)被調(diào)用首先進(jìn)行這個(gè)函數(shù)域的預(yù)解析,并把自己的預(yù)解析放在自己的倉(cāng)庫(kù)里面。
//2、逐行解讀代碼:當(dāng)讀到alert(a)時(shí),函數(shù)域的預(yù)解析結(jié)果為a=undefined,所以打印出undefined。讀到var a=2時(shí),將自己預(yù)解析的結(jié)果變?yōu)閍=2.
alert(a);//讀到這一行的時(shí)候a=1,打印出1
</script>
例6:在例5的基礎(chǔ)上進(jìn)行一個(gè)小改動(dòng),把var a=2改為a=2,則輸出的結(jié)果又不同。
<script>
var a=1 //a=1
funciton fn1(){alert(a); a=2;}
fn1(); //在函數(shù)調(diào)用的時(shí)候。因?yàn)楹瘮?shù)內(nèi)部沒有“var”,所以預(yù)解析沒有結(jié)果。當(dāng)執(zhí)行函數(shù)中的alert(a),就會(huì)到函數(shù)外(父域)找a,此時(shí)a=1,所以打印出1
//函數(shù)a=2,是給全局變量賦值,所以a=2
alert(a);//因?yàn)閍=2,所以打印出2
</script>
例7:在例6基礎(chǔ)上,改動(dòng)一下
<script>
var a=1
funciton fn1(a){alert(a); a=2;}
fn1();
alert(a);
</script>
打印出的結(jié)果會(huì)是:undefined,1。大家自己思考吧。提示:funciton fn1(a)相當(dāng)于funciton fn1(var a)
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果圖文教程
這篇文章主要為大家介紹了OpenCV.js實(shí)現(xiàn)喬丹動(dòng)圖素描效果的圖文教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
JS實(shí)現(xiàn)鼠標(biāo)滑過顯示邊框的菜單效果
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過顯示邊框的菜單效果,涉及javascript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)
下面小編就為大家?guī)?lái)一篇封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-10-10
基于Bootstrap框架實(shí)現(xiàn)圖片切換
這篇文章主要介紹了基于Bootstrap框架實(shí)現(xiàn)圖片切換的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03

