老生常談的Javascript做用域問題

  在前端學習中,做用域這個問題一直被普遍提起,什麼是做用域,什麼又是做用域鏈?在Javascript中,怎麼去理解這些概念都是學好這門語言的關鍵,因此在學習前端開發的過程當中,我須要也頗有必要去學習和總結下javascript----做用域。javascript

  做用域並不難,可是去不多有人能稍微深刻的解釋什麼是做用域,知其然而不知其因此然顯然是遠遠不夠的,因此咱們就深刻淺出一下,前端

  本片博文旨在深度去分析做用域,若有總結不到位之處,請讀者海涵並在評論區指出。java

 

  談到做用域就不得不談到一個名詞----執行環境。什麼叫執行環境呢?數組

 

  執行環境是Javascript中最爲重要的一個概念,它定義了變量或函數有權訪問其餘數據,決定了他們各自的行爲。那麼在每一個執行環境中都有一個叫作「變量對象」的object,執行環境中的全部變量和函數都保存在這個對象中,這個object是沒法被訪問到了,它只能在後臺被javascript解釋器訪問到。瀏覽器

 

  瀏覽器在解析Javascript代碼的時候會爲每一個函數建立一個執行環境,並在該執行環境中生成一個變量對象來存儲變量和其內部的函數。咱們經常用到的window就是最外圍的執行環境,也叫全局執行環境,每一個執行環境的代碼執行完成以後,該環境被銷燬,其中的變量對象也將被銷燬,而全局執行環境只會在瀏覽器或網頁關閉的時候被銷燬,其餘的執行環境(或者內部的)則爲局部執行環境(函數)函數

 

  每一個函數都有本身的執行環境,那麼當代碼的執行流進入到一個函數時,會將該執行環境推入到一個環境棧中,在函數執行完成以後又將其彈出,把對這個執行環境的控制權交還給以前的執行環境,當代碼在一個執行環境中執行的時候,會將該環境中的變量對象連入到做用域鏈中。做用域鏈的做用就是保證對執行環境中的有權訪問的變量和函數有序的訪問。說到這裏,你們可能有些迷糊啦,那麼就用點代碼和圖片來解釋下吧。學習

//window scope
var name0 = 'scope0'
console.log(name0) //這裏能夠訪問到name0 function scope1(){
var name1 = 'scope1'
     console.log(name0,name1) //這裏能夠訪問到name0,name1 function scope2(){ var name2 = 'scope2'
         console.log(name0,name1,name2) //這裏能夠訪問到name0,name1,name2  function scope3(){ var name3 = 'scope3'
              console.log(name0,name1,name2,name3) //這裏能夠訪問到name0,name1,name2,name3 } } }

 

  當JS解釋器去執行這段代碼的時候,會生成4個執行環境,分別是window,scope1,scope2,scope3。而後再執行JS代碼的時候,會把每一個執行環境推入到執行棧中,並生成變量對象給鏈接到做用域鏈中(從上到下),最後生成的做用域鏈就爲:spa

 

window→scope1→scope2→scope3設計

對於每一個執行環境中的變量對象來講,它的做用域鏈就是它本生加上它以前的變量對象(例如scope2的做用域鏈就是scope2和它以前的scope1和window)。咱們先前說道,每一個執行環境中的變量對象就是該執行環境可以訪問到了變量和函數,我的理解爲這個函數就是變量對象的做用域鏈上其餘的變量對象,那麼就很好理解了,咱們分析下上面代碼scope2的變量對象上有哪些東西,首先是參數數組(arguments,這裏爲[])還有name2變量,而後是scope1的變量對象和全局變量對象。對象

  說了這麼多,提了那麼多概念和名詞,咱們好像只是說到了做用域鏈,可是並無說到做用域,這不是扯淡嘛!!!!好吧,咱們如今就來談談做用域。

  

  仍是先來扯下概念吧。是每一個執行環境能夠經過做用域鏈向上訪問這個他的做用域鏈的其餘執行環境,可是不能向下訪問。這個就是做用域啦。。。

  仍是拿scope2函數來講吧,他能夠訪問name2,name1,name0可是不能訪問name3,這個就是做用域的限定,他只能訪問到scope1和window的執行環境(還有它自己)。額,就這麼一小段,我本身都醉了,可是我的以爲做用域就這點東西,關鍵的是在與對執行環境、變量對象和做用域鏈的理解。這些纔是紮實的理解Javascript做用域的關鍵。

  

  其實說到這裏我感受已經差很少了,第一次寫那麼長的博文,文章水準還有待提升,這篇文章主要是我在看《javascript高級程序設計》的看到做用域這小節,感受做者寫了太好了,因而乎加上了一些我的的理解就寫了這篇博客。很是但願有對WEB開發有深入理解的大大們提出批評和看法。

相關文章
相關標籤/搜索