天天看點

一個例子,變量提升和函數提升就是這麼簡單!

一個例子,變量提升和函數提升就是這麼簡單!

為啥要進行變量提升和函數提升?

引擎在讀取js代碼的過程中,分為兩步。第一個步驟是整個js代碼的解析讀取,第二個步驟是執行。

在JS代碼執行之前,浏覽器的解析器在遇到 var 變量名 和function 整個函數 提升到目前作用域的最前面。

記住兩句話​

1、變量提升隻會提升變量名的聲明,而不會提升變量的指派初始化。

2、函數提升的優先級大于變量提升的優先級,即函數提升在變量提升之上。

記住這兩句話,就可以從容不迫的撸代碼了!​

console.log(a); 
var a=1;
console.log(a);    
function a(){console.log(2);}
console.log(a);   
var a=3;
console.log(a);    
function a(){console.log(3);}
a();
console.log(a);      

你知道執行結果嗎?

一個例子,變量提升和函數提升就是這麼簡單!

其實,實際的執行順序為:​

function a(){alert(3);} //第一步預解析:将 var a提升      但因為變量名與函數名相同,故function a()提升時将覆寫var a,又因為存在兩個相同名稱                           的function函數,後寫的将覆寫先寫的,是以最後提升的隻有function a(){alert(3);}
 
console.log(a);     //因為函數提升,是以列印的a為函數整體
a=1;        //将1指派給函數a,此時的a為一個變量,不再是函數
console.log(a);     //故列印的為a賦的值
console.log(a);
a=3;        //将a重新指派3
console.log(a);     //故列印結果為3
a();        //此時的a為一個變量,不再是一個函數,是以報錯,js中一旦出現報錯,後面的語句将不再運作,是以最後一個console.log不進行列印。
console.log(a);      

結束!搞清楚這題,變量提升與函數提升你就搞懂啦!

本文完〜