幾乎所有的編程語言都可以存儲,訪問,修改變數,那在JavaScript中這些變數放在那裡?程式如何找到他們? js被歸類於解釋執行語言,但事實上他也是一門編譯語言,因為他也要編譯,但於傳統的編譯語言不同,他不是提前編譯,編譯結果也不能在分散式系統中進行移植。但js引擎編譯的步驟和傳統的編譯語言非常相 ...
幾乎所有的編程語言都可以存儲,訪問,修改變數,那在JavaScript中這些變數放在那裡?程式如何找到他們?
js被歸類於解釋執行語言,但事實上他也是一門編譯語言,因為他也要編譯,但於傳統的編譯語言不同,他不是提前編譯,編譯結果也不能在分散式系統中進行移植。但js引擎編譯的步驟和傳統的編譯語言非常相似。
傳統的編譯會經歷3個步驟:
- 分詞:將組成的字元串分解成有意義的代碼塊(詞法單元)for instance:var a = 2;被分解成var,a,=,2,;。
- 語法分析:將詞法單元轉換成有元素逐級嵌套所組成的代表了程式語法結構的樹,這個樹叫抽象語法樹。
- 代碼生成:將抽象語法樹轉換成可執行的代碼的過程。簡單來說就是將抽象語法樹轉化為一組機器指令,用來創建一個叫作a的變數(包括分配記憶體等),並將值存儲到a中。
對於傳統的編譯過程,js引擎要複雜的多,js編譯發生在執行前的幾微秒,然後做好執行他的準備,並且通常馬上就會執行他。
說道這還是沒有說這些變數放在那裡?下麵介紹3位大佬:
- 引擎:從頭到尾負責整個js程式的變以及執行過程。
- 編譯器:負責語法分析和代碼生成等。
- 作用域:負責收集並維護由所有聲明的標識符(變數和函數)組成的一系列查詢,並實施一套非常嚴格的規則,確定當前執行的代碼對這些變數的訪問許可權。
這時候答案就浮出水面。啊,是這伙計--作用域.
作用域?大哥你哪來的啊?上面提到作用域像一個容器一樣收集並維護所有標識符(變數和函數)事實上他是一個對象,收集的東西掛在它的屬性上。作用域的出生是因為函數的產生而產生的。當函數執行的前一刻的時候,會創建一個作用域,這個作用域定義了這個函數執行時的環境,函數每次執行時的作用域都是獨一無二的,因為他是對象啊,就像出生的孩子長得都不太一樣。這個作用域小名特別多,什麼執行期上下文,AO(Activation Object)對象,活動對象。作用域這幫伙計們有個頭叫--全局作用域。裡面的作用域能看到外面的,哈哈,你在我面前就是個小透明,但外的作用域可看不到裡面的。
在js高程里解釋道作用域。
作用域是因函數產生而產生的,每個對象都有屬性和方法,函數(function)也是一種特殊的對象,函數可以有test.name test.prototype ...這些是可以訪問的,還有一些屬性是不可以訪問的隱式屬性僅供JavaScript引擎處理。 比如[[scope]]:指的是作用域鏈,其中存儲了執行期上下文的集合。這個集合呈現鏈式連接,我們把這種連接叫做作用域鏈。作用域鏈本質上是一個指向變數對象的指針列表,他只是引用,但不包含實際變數對象。.[[scope]]這裡面存的就是作用域。系統會根據內部的原理去定期調用scope。當函數執行的前一刻的時候,會創建一個稱為執行期上下文的內部對象(AO activation object)。一個執行期上下文定義了一個函數執行時的環境。函數每次執行時對應的上下文都是獨一無二的,即使執行一樣的函數但是執行期上下文並不相同,所以多次調用一個函數會導致創建多個執行上下文,當函數執行完畢,他所產生的執行上下文會銷毀。
上面還提到了編譯,說道js編譯發生在執行前的幾微秒。也講到變數和函數會放到作用域的問題,事實上,是這樣的,在程式執行前不是要進行編譯的嗎,在引擎和編譯器兩位大哥的幫助下 ,在編譯時(函數執行前)會處理聲明的變數和函數,把他掛到作用域這個對象的屬性上。這個過程叫 -- 見下行。
預編譯
當你看見var a = 2;這段程式時,很可能認為這是一句聲明,事實上我們引擎這哥們認為有兩個完全不同的聲明,一個由編譯器在編譯時處理,另一個在引擎運行時處理。
代碼執行前會對其進行編譯,首先編譯器會分詞,然後解析成語法樹,最後進行代碼生成,別忘了代碼生成就是將語法樹轉化為一組機器指令。
- 生成代碼前編譯器會詢問作用域是否有該名稱的變數,如果有,忽略該聲明,如果沒有,會要求作用域在當前作用域的集合中聲明一個新變數,並命名為a。
- 接下來為引擎生成運行時所需要的代碼,這些代碼用來處理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是順序執行)。
- console.log(a)查看作用域是否有變數a,有,但沒有值,a為undefined。
- var a = 2;查看作用域是否有變數a,有,對a賦值a = 2。
- console.log(a)查看作用域是否有變數a,有,值為2。
當函數和變數同名時,函數會覆蓋變數。
由此預編譯過程可以總結成一下過程
預編譯四部曲:
- 1.創建AO對象/活動對象(activation object)(執行期上下文)
- 2.找形參和變數聲明,將變數和形參名作為AO屬性名,值為undefined
- 3.將實參值和形參統一
- 4.在函數體裡面找到函數聲明,值賦予函數體