重學JavaScript第1集|變量提升
變量提升就好比JavaScript引擎用一個很小的代碼起重機將所有var聲明和function函數聲明都舉起到所屬作用域(所謂作用域,指的是可訪問變量和函數的區域)的最高處。這句話的意思是:如果在函數體外定義函數或使用var聲明變量。則變量和函數的作用域會提升到整個代碼的最高處,此時任何地方訪問這個變量和調用這個函數都不會報錯;而在函數體內定義函數或使用var聲明變量,變量和函數的作用域則會提升到整個函數的最高處,此時在函數體內任何地方訪問這個變量和調用所定義的函數都不會報錯。
示例如下:
- console.log("gv1=" + gv); // 在聲明前訪問變量
- show();
- var gv = "javascript";
- console.log("gv2=" + gv);
- function(){
- console.log("lv1= " + lv);
- vat lv = "js";
- console.log("lv2=" + lv);
- }
輸出結果:
- gv1 = undefined;
- lv1 = undefined;
- lv2 = js;
- gv2 = javasript;
在上述代碼中,第一行迪馬以及show函數中的第一行代碼分別是在變量聲明前訪問了gv和lv變量,第二行代碼在函數定義前,調用了show函數。從輸出結果來看,上述代碼在聲明之前訪問變量以及在定義前調用函數完全沒問題,原因是變量提升。
上述代碼在代碼運行前,經過預解析處理后的代碼邏輯如下:
- var gv; // 變量聲明提升到當前作用域的最高處
- var show = function show (){
- var lv;
- console.log("lv1=" + lv);//lv在聲明時沒有初始化,所以輸出undefined
- lv= "js";
- console.log("lv2=" + lv); // 變量輸出賦予的值: js
- }
- console.log("gv1=" + gv1); // gv在聲明時沒有初始化,所以輸出undefined
- gv = "javascript";
- console.log("gv2=" + gv);//變量輸出所賦予的值:javascript
由上可見,正是因為var支持變量提升,所以可以在聲明前使用var聲明的變量,而let和const不支持變量提升,所以它們聲明的變量必須先聲明才可以使用。
一般來說,javascript代碼的執行包括兩個過程:預解析處理過程和逐行解讀過程。在代碼逐行解讀前,javascript引擎需要進行帶的預解析處理。在預解析過程中,當前作用域中var變量聲明和函數定義將被提升到作用域的最高處。