第一次寫博客,本來是學習jQuery遇到閉包問題,發現並沒有理解閉包,發現閉包牽扯的知識點太多。複習了一遍(發現自己該記住的全忘了)寫在博客里,自己也是小白,希望大神們指點迷津,必將感激不盡。 我們知道JavaScript有兩個特點:單線程,解釋型語(翻譯一行,解釋一行)。但其實翻譯一行,解釋一行是 ...
第一次寫博客,本來是學習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 var a = 123; ---> var a; console.log(a); //undefined a = 123; -------------------------- test(); //456 function test(){ console.log(456); } ---> funciton test(){ console.log(456); } test(); // 456 但是光記住這兩句話並不能解決所有的問題。 看一下下麵的 console.log(a); function a(){ } var a = 123; 想一下列印的是什麼? 居然是 ƒ a(){} 再看看下麵的更複雜的 console.log(a); function a(a){ var a = 234; var a = function(){
} a(); } var a = 123;
這個列印出來是什麼呢? ƒ 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