重學Javascript（三）一文完全理解JavaScript做用域

前言

從這篇文章開始，算是正式進入了重學JavaScript的正軌，做用域與做用域鏈是JavaScript的重要概念之一，深刻理解做用域對理解JavaScript閉包，執行上下文等概念都有很大的幫助。

騷話沒想好，直接開始正文吧

什麼是做用域

做用域（scope）是指程序源代碼中定義變量的區域，簡單來講，一段程序代碼中所用到的變量並不老是有效的，而限定這個變量的可用性的代碼範圍就是這個變量的做用域。

在JavaScript中使用的做用域是靜態做用域（詞法做用域），特色就是變量的做用域在變量定義時肯定。下文所說的做用域都指代靜態做用域。

全局做用域

全局做用域是最外圍的一個做用域。根據 ECMAScript 實現所在的宿主環境不一樣，表示全局做用域的對象也不同。在瀏覽器中，全局做用域就是window對象，node則是global對象。

擁有全局做用域的變量能夠在全部做用域中被訪問，假如將全局做用域比喻爲中國，中國人這個屬性擁有全局做用域，不管你是浙江人仍是杭州人理所擔任均可以說是中國人。

在JavaScript中通常有如下三種情形擁有全局做用域：

1.window（global）下的屬性或者方法

global.nationality = 'Chinese'

function province () {
    var province = '浙江'
    console.log(nationality)
}

province()   //Chinese
複製代碼

2.最外層的變量或者函數

var country = '中國'

function province () {
    var province = '浙江'
    return province
}

function city () {
    var city = '杭州'
    console.log(country,province(),city)
}

city()   //中國 浙江 杭州
複製代碼

3.未定義直接賦值的變量

function province () {
    var province = '浙江'
    Country = '中國'
    return province
}

function city () {
    var city = '杭州'
    console.log(Country,province(),city)
}

city()  //中國 浙江 杭州
複製代碼

局部做用域

和全局做用域相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的是函數內部。

函數做用域

定義在函數中的變量就處於函數做用域中。不一樣函數做用域中，變量不能相互訪問。仍是按照上面的例子舉例，

若是你是浙江人，你能夠說你是中國人，可是你不能說你是福建人。固然若是你是杭州人，你能夠說本身是浙江人，由於浙江的函數做用域包含了杭州的函數做用域。

簡單來講就是裏面的能夠訪問外面的做用域，可是不能訪問裏層的和同級的做用域

塊級做用域

JavaScript 自己是沒有塊級做用域，這就常常會致使理解上的困惑。

function province () {
    console.log(province)  //undefined
    var province = '浙江'
}
複製代碼

好比上述的代碼，我但願打印出的實際上是province函數自己，可是因爲，下方聲明瞭province變量，致使其province變量獲得提高,等價於下面代碼。

function province () {
  	var province
    console.log(province)  //undefined
    province = '浙江'
}
複製代碼

所以ES6 引入了塊級做用域，讓變量的生命週期更加可控，使用let和const聲明的變量在指定塊（簡單理解就是一對花括號）的做用域外沒法被訪問。

可是這個並不能解決上面個人問題，由於let聲明會致使暫時性死區，我並不能獲取全局的province函數，並且還會報錯。後面應該還會寫一個ES6的系列，用於整理ES6的新特性。感興趣的能夠去搜索相關的文章，這邊就不贅述了。

預編譯

再講做用域鏈以前，仍是但願在這邊講一下JavaScript的預編譯，理解這一部分，做用域鏈就如同脫光衣服的。。。

上面其實咱們已經接觸到一部分了，可是並不系統，在好久以前，我會用函數變量聲明提高，函數申明的優先級優於變量申明，函數申明會帶函數體一塊兒提高等口訣來解決這些問題。可是隨着學習的深刻，這些口訣並不能準確有效的解決複雜場景下的問題，例以下面這個例子

function a(a){
  var a =a+1
  console.log(a)  // 2
}
var a
a(1)
console.log(a) // [Function: a]
複製代碼

遇到這種問題，最好的方法就是了解預編譯，由於它的存在本就是用於解決執行順序問題。

咱們須要知道JavaScript在運行中會進行三個步驟,語法分析、預編譯和解釋執行

在執行完JavaScript的語法分析後，就會進入全局預編譯環節

1.生成一個全局對象或者叫作全局執行上下文（我一直不習慣這麼叫，以爲太拗口）因此下面就用GO（Global Object）來，GO只有一個，瀏覽器中的GO其實就是 window 對象 GO={}

2.將變量聲明做爲屬性名掛載在GO上，值爲undefined GO.a=undefined

3.找函數聲明，並將函數名做爲GO對象的屬性名，值爲函數體。GO.a=[Function: a]

若是執行過程當中遇到函數，就會觸發局部預編譯，函數的局部預編譯發生在函數執行前的一刻。 a(1)

1.生成一個活動對象或者叫作局部執行上下文，爲了統一下面就用AO（Active Object）來表示，AO能夠有無數個，每次調用函數都會建立一個新的AO. AO={}

2.找形參和變量聲明,將變量和形參名做爲AO的屬性名,值一樣爲undefined. AO.a=undefined

3.將AO的形參的值改成實參值. AO.a=1

4.在該函數體裏面找函數聲明，值爲函數體

完全理解預編譯，就能夠明白不一樣執行階段變量的值，不管再複雜的的題，對你來講都沒有區別了。

做用域鏈

消化吸取了以前的預編譯以後，咱們就能夠去了解做用域鏈了，做用域鏈最泛用的場景就是函數，因此下面例子都是以函數爲主體，話很少說，先看例子。

var z = 1 
function tim(){
   function cope(){
       var x= 2;
       y=3
   }
   var y = 4
   cope()
   console.log(y)  // 3
}

tim()
複製代碼

運行代碼以後咱們就能夠發現輸出爲3，那麼做爲cope做用域中的值3是怎麼在tim做用域中輸出的呢？

答案就是做用域鏈。

每一個JavaScript對象都有屬性，有些能夠被咱們訪問，有些卻不行，這些屬性僅供js引擎存取，而咱們接下來要講的[[scope]]就是這樣的一個屬性。

當函數被定義時它就被綁定了[[scope]]屬性，而[[scope]]中存儲的就是執行上下文的集合（GO | AO），其呈鏈式連接，咱們稱之爲做用域鏈。讓咱們再回頭來看以前的例子

var z = 1 
//1.tim 定義 tim.[[scope]] = GO:{z:1,tim:[Function: tim]}
function tim(){
  //3.cope定義 cope.[[scope]] = tim.[[scope]] = tim(AO):{cope:[Function: cope],y:undefined}=>GO
   function cope(){
       var x= 2;
     	 // 6.cope(AO)上沒有y屬性，就會沿着做用域鏈往上找，一直沒有就會掛載在GO上
       y=3
   }
  //4.tim(AO):{cope:[Function: cope],y:4}
   var y = 4
   //5.cope.[[scope]] = cope(AO):{x:undefined}=>tim(AO)=>GO
   cope()
  //7.tim(AO):{cope:[Function: cope],y:4}
   console.log(y)  // 3
}
//2.tim 執行 tim.[[scope]] = tim(AO):{cope:[Function: cope],y:undefined}=>GO:{z:1,tim:[Function: tim]}
tim()
複製代碼

按照代碼運行的順序大體就是如此，不熟悉的可能須要三五分鐘仔細消化一下這個流程。

簡單總結一下

1.做用域鏈存儲的就是執行上下文的集合

2.當前做用域中沒有使用未在在做用域定義的變量時，會沿着做用域鏈向上找。

寫在最後

文章寫到這差很少就結束了，在語義表達和理解方面可能存在很多漏洞，若是存在問題但願各位大佬不吝指正。講述完了做用域與做用域鏈，那接下來就不得不提之前很讓我頭疼的閉包了，不過有了這篇文章鋪墊，我相信理解閉包的過程將變得十分愉快，因此下篇見咯。

參考

1. Dmitry Soshnikov dmitrysoshnikov.com/ecmascript/…