1. 程式人生 > >JavaScript作用域及預編譯

JavaScript作用域及預編譯

幾乎所有的程式語言都可以儲存,訪問,修改變數,那在JavaScript中這些變數放在那裡?程式如何找到他們?

js被歸類於解釋執行語言,但事實上他也是一門編譯語言,因為他也要編譯,但於傳統的編譯語言不同,他不是提前編譯,編譯結果也不能在分散式系統中進行移植。但js引擎編譯的步驟和傳統的編譯語言非常相似。

傳統的編譯會經歷3個步驟:

  1. 分詞:將組成的字串分解成有意義的程式碼塊(詞法單元)for instance:var a = 2;被分解成var,a,=,2,;。
  2. 語法分析:將詞法單元轉換成有元素逐級巢狀所組成的代表了程式語法結構的樹,這個樹叫抽象語法樹。
  3. 程式碼生成:將抽象語法樹轉換成可執行的程式碼的過程。簡單來說就是將抽象語法樹轉化為一組機器指令,用來建立一個叫作a的變數(包括分配記憶體等),並將值儲存到a中。

對於傳統的編譯過程,js引擎要複雜的多,js編譯發生在執行前的幾微秒,然後做好執行他的準備,並且通常馬上就會執行他。

說道這還是沒有說這些變數放在那裡?下面介紹3位大佬:

  1. 引擎:從頭到尾負責整個js程式的變以及執行過程。
  2. 編譯器:負責語法分析和程式碼生成等。
  3. 作用域:負責收集並維護由所有宣告的識別符號(變數和函式)組成的一系列查詢,並實施一套非常嚴格的規則,確定當前執行的程式碼對這些變數的訪問許可權。

這時候答案就浮出水面。啊,是這夥計--作用域.

作用域?大哥你哪來的啊?上面提到作用域像一個容器一樣收集並維護所有識別符號(變數和函式)事實上他是一個物件,收集的東西掛在它的屬性上。作用域的出生是因為函式的產生而產生的。當函式執行的前一刻的時候,會建立一個作用域,這個作用域定義了這個函式執行時的環境,函式每次執行時的作用域都是獨一無二的,因為他是物件啊,就像出生的孩子長得都不太一樣。這個作用域小名特別多,什麼執行期上下文,AO(Activation Object)物件,活動物件。作用域這幫夥計們有個頭叫--全域性作用域。裡面的作用域能看到外面的,哈哈,你在我面前就是個小透明,但外的作用域可看不到裡面的。

 

在js高程裡解釋道作用域。

 作用域是因函式產生而產生的,每個物件都有屬性和方法,函式(function)也是一種特殊的物件,函式可以有test.name test.prototype ...這些是可以訪問的,還有一些屬性是不可以訪問的隱式屬性僅供JavaScript引擎處理。 比如[[scope]]:指的是作用域鏈,其中儲存了執行期上下文的集合。這個集合呈現鏈式連線,我們把這種連線叫做作用域鏈。作用域鏈本質上是一個指向變數物件的指標列表,他只是引用,但不包含實際變數物件。.[[scope]]這裡面存的就是作用域。系統會根據內部的原理去定期呼叫scope。當函式執行的前一刻的時候,會建立一個稱為執行期上下文的內部物件(AO activation object)。一個執行期上下文定義了一個函式執行時的環境。函式每次執行時對應的上下文都是獨一無二的,即使執行一樣的函式但是執行期上下文並不相同,所以多次呼叫一個函式會導致建立多個執行上下文,當函式執行完畢,他所產生的執行上下文會銷燬。

 

上面還提到了編譯,說道js編譯發生在執行前的幾微秒。也講到變數和函式會放到作用域的問題,事實上,是這樣的,在程式執行前不是要進行編譯的嗎,在引擎和編譯器兩位大哥的幫助下 ,在編譯時(函式執行前)會處理宣告的變數和函式,把他掛到作用域這個物件的屬性上。這個過程叫 -- 見下行。

預編譯

當你看見var a = 2;這段程式時,很可能認為這是一句宣告,事實上我們引擎這哥們認為有兩個完全不同的宣告,一個由編譯器在編譯時處理,另一個在引擎執行時處理。

程式碼執行前會對其進行編譯,首先編譯器會分詞,然後解析成語法樹,最後進行程式碼生成,別忘了程式碼生成就是將語法樹轉化為一組機器指令。

  1. 生成程式碼前編譯器會詢問作用域是否有該名稱的變數,如果有,忽略該宣告,如果沒有,會要求作用域在當前作用域的集合中宣告一個新變數,並命名為a。
  2. 接下來為引擎生成執行時所需要的程式碼,這些程式碼用來處理a = 2這個賦值操作,執行時引擎首先會問作用域,在當前作用域集合中是否有一個叫作a的變數,如果找到就會對他賦值,否則就會丟擲異常。

也就是說變數和函式在內的所有宣告都會在任何程式碼被執行前首先被處理。--先編譯,在執行。

console.log(a);  //undefinde
var a = 2; 
console.log(a);  //2

這也解釋了為什麼第一行沒有報錯的原因。

首先程式碼執行前一刻進行編譯,var a; console.log(a); a = 2; console.log(a);類似這樣的執行順序(就好像變數和函式從他們的程式碼中出現的位置被移動到了最上面)。 編譯器看到var a會檢視當前作用域是否有變數a,沒有宣告一個變數a,開始執行程式碼(js是順序執行)。

  1. console.log(a)檢視作用域是否有變數a,有,但沒有值,a為undefined。
  2. var a = 2;檢視作用域是否有變數a,有,對a賦值a = 2。
  3. console.log(a)檢視作用域是否有變數a,有,值為2。

    當函式和變數同名時,函式會覆蓋變數。

  由此預編譯過程可以總結成一下過程

  預編譯四部曲:

  • 1.建立AO物件/活動物件(activation object)(執行期上下文)
  • 2.找形參和變數宣告,將變數和形參名作為AO屬性名,值為undefined
  • 3.將實參值和形參統一
  • 4.在函式體裡面找到函式宣告,值賦予函式體