JavaScript 變量和函數提升問題總結
阿新 • • 發佈：2018-05-21
rda UNC 聲明變量 全局 報錯 問題 code bsp ()
一 什麽是JavaScript 變量提升？
-- JS程序運行時，
（a）變量的聲明會被解釋器"提升"到方法體內的頂部，初始化賦值操作不提升按順序執行
（b）函數體內未聲明的變量，解釋器會在函數體外聲明變量，成為全局變量
（c）聲明過的函數，整個函數體會被解釋器提升到方法體的頂部，初始化賦值操作按順序執行
1-1 變量提升
eg：變量的聲明提升，初始化賦值不提升。
<script> console.log(a); // undefined var a=3; // 若沒有var聲明，會報錯 a is not defined console.log(a);// 3 function fn() { console.log(a); // undefined var a = ‘a‘; //此a為局部變量，沒有這一句上下輸出的結果都變為3 console.log(a); // a } fn(); console.log(a); // 3 </script>
上述代碼相當如下：
<body> <script> var a; console.log(a); // undefined a=3; // 若沒有var聲明，會報錯 a is not definedconsole.log(a); // 3 function fn() { var a; console.log(a); // undefined a = ‘a‘; //沒有這一句上下輸出的結果都變為3 console.log(a); // a } fn(); console.log(a); // 3 </script> </body>
對比改掉函數中a的var聲明
<script> console.log(a); // undefined vara=3; // 若沒有var聲明，會報錯 a is not defined console.log(a); // 3 function fn() { console.log(a); //變成了 3 a = ‘a‘; //此a變成全局變量，沒有這一句上下輸出的結果都變為3 console.log(a); // a } fn(); console.log(a); //變成了 a </script>
上述代碼相當如下：
<script> console.log(a); // undefined var a=3; // 若沒有var聲明，會報錯 a is not defined console.log(a); // 3 var a; function fn() { console.log(a); // 3 a = ‘a‘; //沒有這一句上下輸出的結果都變為3 console.log(a); // a } fn(); console.log(a); // a </script>
ps：所以為避免調用函數後，可能修改了外部的變量，函數內的變量都要聲明初始化，規範化。
1-2 函數提升
eg：聲明式函數將整個函數體提升到頂部，字面量式函數只提升聲明過的變量
<script> console.log(f1); //function f1() {} console.log(f2); //undefined function f1() {} var f2 = function () {}; //若沒有var聲明，上面結果報錯f2 is not defined console.log(f2); //function () {} </script>
上述代碼相當如下：
<script> function f1() {} //提前 var f2; //提前 console.log(f1); //function f1() {} console.log(f2); //undefined f2 = function () {}; //若沒有var聲明，上面結果報錯f2 is not defined console.log(f2); //function () {} </script>
ps：為避免出現一些意料不到的變量提升的錯誤，在每一個變量的作用域開始之前，聲明並初始化變量，留意函數體中未聲明的變量自動變成全局變量後，導致的種種情況
JavaScript 變量和函數提升問題總結