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 變量和函數提升問題總結