JavaScript 之 預編譯 作用域，作用域鏈
阿新 • • 發佈：2019-02-22
每次 生成 代碼 引用 空間 小白 ati pro function 第一次寫博客，本來是學習jQuery遇到閉包問題，發現並沒有理解閉包，發現閉包牽扯的知識點太多。復習了一遍(發現自己該記住的全忘了)寫在博客裏，自己也是小白，希望大神們指點迷津，必將感激不盡。
我們知道JavaScript有兩個特點：單線程，解釋型語（翻譯一行，解釋一行）。但其實翻譯一行，解釋一行是最後一部才這樣做，在這之前會有一個語法分析：通篇掃描看有沒有語法錯誤，但不執行，通篇掃描之後，會進行 預編譯 然後 -->解釋一行，執行一行。這就是我們所說的js運行三部曲：語法分析 預編譯 解釋執行
沒錯，預編譯開始啦！
test() //VM129:1 Uncaught ReferenceError: test is not defined
console.log(a) // VM118:1 Uncaught ReferenceError: a is not defined
test(); //456
function test(){
console.log(456); }； console.log(a); //undefined var a = 123; 上面四段代碼當我們執行前兩個的時候報錯，瀏覽器告訴我們 test 和 a 沒有被定義，而後兩段代碼並沒有報錯，這就是預編譯。 在學習預編譯的時候我們總是記住一句話：函數聲明整體提升，變量 聲明提升。也就是說預編譯會把整個函數放在最最前面。而變量 聲明提升是什麽意思呢？ var a = 123;其實是變量聲明和賦值的兩個過程；1）var a; 2）a = 123;預編譯只把聲明提升在最前面 console.log(a); //undefined} 再看看下面的更復雜的 console.log(a); function a(a){ var a = 234; var a = function(){
這個打印出來是什麽呢？ ? a(a){ var a = 234; var a = function(){
} a(); } 這是為什麽呢？ 下面來講一下預編譯： imply global 暗示全局變量：即任何變量。如果變量未經申明就賦值，此變量就為全局對象（window）所有。 a = 123；如果 var a = b = 123；在函數裏a就是函數內部變量，b則是全局變量。 一切聲明的全局變量，全是window的屬性(window 就是全局的域)：var a = 123;-----> window.a = 123； 使用var聲明的變量會自動被添加到最接近的環境中。 預編譯發生在函數執行的前一刻。 預編譯四部曲： 1.創建AO對象/活動對象（activation object）（執行期上下文） 2.找形參和變量聲明，將變量和形參名作為AO屬性名，值為undefined 3.將實參值和形參統一 4.在函數體裏面找到函數聲明，值賦予函數體 由此我們便知道上面的那兩個例子打印的為什麽是那樣的。 下面我們來看下更復雜的 function fun(a) { console.log(a); var a = 123; console.log(a); function a() { } console.log(a); var b = function () { } console.log(b); function d() { } } fun(1); --> 1.生成AO對象 AO{
} 2.找形參和變量聲明，將變量和形參名作為AO屬性名，值為undefined AO{ a: undefined; b:undefined; } 3.將實參值和形參統一 AO{ a: 1; b:undefined; } 4.在函數體裏面找到函數聲明，值賦予函數體 AO{ a: function a(){}; b:undefined; d:function(){} } 預編譯結束 函數執行 AO就像一個創庫一樣，函數執行期間裏面的倉庫也會變化 AO{ a: function a(){}; b:undefined; d:function(){} } function fun(a) { console.log(a); // ? a() { } var a = 123; console.log(a); //123 function a() { } console.log(a); //123 var b = function () { } console.log(b); //? () { } function d() { } } -------------------------- function test(){ console.log(b); if(a){ var b = 100; } console.log(b); c = 234; console.log(c); } var a; test(); a = 10; console.log(c);
預編譯 全局GO GO{ a:undefined; test:function test(){} } AO{ b:undefined; } ------------ 執行函數 GO{ a:undefined;--->10 test:function test(){} c:234 } AO{ b:undefined; } function test(){ console.log(b); //undefined if(a){ var b = 100; } console.log(b); //undefined c = 234; console.log(c); //234 } var a; test(); a = 10; console.log(c); //234 作用域 作用域鏈 function test（）{}； 我們知道一個函數就像一個房子一樣，這個房子形成單獨的域，裏面能看到外面的，外面的看不到裏面的，我們可以把函數生成的空間叫做作用域那這個作用域到底是什麽呢？ 這個作用域是因函數產生而產生的，每個對象都有屬性和方法，函數（function）也是一種特殊的對象，函數可以有test.name test.prototype ...這些是可以訪問的 還有一些屬性是不可以訪問的隱式屬性僅供JavaScript引擎處理。 比如[[scope]]：指的就是我們所說的作用域鏈，其中存儲了執行期上下文的集合。 為什麽時集合呢？作用域鏈：是[[scope]]中所存儲的執行期上下文的集合，這個集合呈現鏈式連接，我們把這種連接叫做作用域鏈。 作用域鏈本質上是一個指向變量對象的指針列表，他只是引用，但不包含實際變量對象。 test.[[scope]]這裏面存的就是作用域。系統會根據內部的原理去定期調用scope。 上面提到了執行期上下文（前面作用域也提到的AO對象就是這個）：當函數執行的前一刻的時候，會創建一個稱為執行期上下文的內部對象（AO activation object）。一個執行期上下文定義了一個函數執行時的環境 函數每次執行時對應的上下文都是獨一無二的 test()； test();一樣的函數但是執行期上下文並不相同，所以多次調用一個函數會導致創建多個執行上下文，當函數執行完畢，他所產生的執行上下文會銷毀。
看一下下面的例子 function a(){} var glob = 100; a(); 當a函數被定義 a.[[scope]]---> 0:GO{} 因為a函數在全局作用域裏，所以他的第一位存的時GO 當a執行執行 a.[[scope]]---> 0:AO{} 1:GO{} ---------------------------------------------- function a(){ function b(){ function c(){} c(); } b(); } a(); a defined a.[[scope]] ---> 0 : GO a doing a.[[scope]] ---> 0 : a AO 1 : GO b defined b.[[scope]] ---> 0 : a AO 1 : GO b doing b.[[scope]] ---> 0 : b AO 1 : a AO 2 : GO c defined c.[[scope]] ---> 0 : b AO 1 : a AO 2 : GO b doing c.[[scope]] ---> 0 : c AO 1 : b AO 2 : a AO 3 : GO
JavaScript 之 預編譯 作用域，作用域鏈