js中作用域的實例解析
首先,要了解一下作用域的概念:作用--讀、寫,域--范圍或空間。作用域:可用來進行讀、寫操作的范圍或者空間。
其次,再來看看瀏覽器讀取js文件(script標簽內(nèi)的內(nèi)容)的步驟。
第一步:預(yù)解析-----根據(jù)var function 把可能用到的參數(shù)或函數(shù)找出來,放在內(nèi)存里(這相當于放到倉庫里面)
例1:
<script> alert(a) var a=1 function fn1(){alert(2)} </script>
根據(jù)var和function可以找到:a fn1
預(yù)解析的過程中會自動給變量賦值undefined,即:a=undefined;而函數(shù)的值就函數(shù)本身,即:fn1=function fn1(){alert(2)}
所以預(yù)解析后:a = undefined, fn1=function fn1(){alert(2)}
如果函數(shù)和變量重名,那么只保留有值的那個。
例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后面還有一個函數(shù)function a(){alert(4)}
那么預(yù)解析之后的結(jié)果就變成了:a=function a(){alert(4)}。因為后一個有值的會覆蓋前一個。
第二步:就是從上而下逐行解讀代碼了
例4:
首先我們知道下面的代碼預(yù)解析的結(jié)果是:a=function a(){alert(4)}
<script> alert(a) //讀這一行的時候a=function a(){alert(4)},所以打印出來的是function a(){alert(4)} var a=1 //讀這一的行的是后,是給a重新賦值了,所以a=1 alert(a) //讀這一行的時候a=1,所以打印出來的是1 function a(){alert(2)} //讀這一行的時候,沒有對a重新賦值,也不會打印任何東西,因為函數(shù)沒被調(diào)用。 alert(a) //讀這一行的時候a=1,所以打印出來的是1 var a=10 //讀這一的行的是后,是給a重新賦值了,所以a=10 alert(a) //讀這一行的時候a=10,所以打印出來的是10 function a(){alert(4)} //讀這一行的時候,沒有對a重新賦值,也不會打印任何東西,因為函數(shù)沒被調(diào)用。 alert(a) //讀這一行的時候a=10,所以打印出來的是10 </script>
---------------------上面的內(nèi)容,幫助去理解預(yù)解析的概念,還沒有用到“域”。而對于預(yù)解析來說,只要遇到一個“域”,就會在這個“域”內(nèi)發(fā)生預(yù)解析------------------------
例5:
以下代碼預(yù)解析:a=undefined,fn1=funciton fn1(){alert(a)var a=2;},然后開始執(zhí)行代碼
<script> var a=1 //讀到這一行的時,給a賦值,a=1 funciton fn1(){alert(a);var a=2;} //讀到這一行的時,什么都沒發(fā)生 fn1();//讀到這一行時,函數(shù)被調(diào)用。也分為兩步 //1、函數(shù)被調(diào)用首先進行這個函數(shù)域的預(yù)解析,并把自己的預(yù)解析放在自己的倉庫里面。 //2、逐行解讀代碼:當讀到alert(a)時,函數(shù)域的預(yù)解析結(jié)果為a=undefined,所以打印出undefined。讀到var a=2時,將自己預(yù)解析的結(jié)果變?yōu)閍=2. alert(a);//讀到這一行的時候a=1,打印出1 </script>
例6:在例5的基礎(chǔ)上進行一個小改動,把var a=2改為a=2,則輸出的結(jié)果又不同。
<script> var a=1 //a=1 funciton fn1(){alert(a); a=2;} fn1(); //在函數(shù)調(diào)用的時候。因為函數(shù)內(nèi)部沒有“var”,所以預(yù)解析沒有結(jié)果。當執(zhí)行函數(shù)中的alert(a),就會到函數(shù)外(父域)找a,此時a=1,所以打印出1 //函數(shù)a=2,是給全局變量賦值,所以a=2 alert(a);//因為a=2,所以打印出2 </script>
例7:在例6基礎(chǔ)上,改動一下
<script> var a=1 funciton fn1(a){alert(a); a=2;} fn1(); alert(a); </script>
打印出的結(jié)果會是:undefined,1。大家自己思考吧。提示:funciton fn1(a)相當于funciton fn1(var a)
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
JavaScript常用截取字符串的三種方式用法區(qū)別實例解析
本文給大家分享JavaScript常用截取字符串的三種方式及每種用法的區(qū)別解析,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05JavaScript navigator.userAgent獲取瀏覽器信息案例講解
這篇文章主要介紹了JavaScript navigator.userAgent獲取瀏覽器信息案例講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08js 動態(tài)給元素添加、移除事件的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 動態(tài)給元素添加、移除事件的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07深入淺出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解
下面小編就為大家?guī)硪黄钊霚\出webpack教程系列_安裝與基本打包用法和命令參數(shù)詳解。小編覺得挺不錯的,現(xiàn)在就想給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09