JavaScript 變數與函數的Hoisting

目錄 : 網頁設計學習課程參考

JavaScript 和其他的程式語言有一個差異就是JavaScript有Hoisting功能． JavaScript Hoisting功能會在JavaScript執行前先去尋找變數與函數的定義，然後把定義移到文件的最上方．因此那怕是在程式中在後面才定義變數與函數，但在前面就已拿來使用，程式也不會發生錯誤而中止執行該段程式‧ 對大部份人而言，這個特色可能帶來麻煩，因為這可能需要額外的功夫才能發現答案為何不正確．因此我們務必養成習慣變數與函數要先行定義才能使用.

範例

在本例子中, 我們在第一個script段落中用alert顯示變數myEmail的值, 但myEmail卻始終沒有定義. 隨後用alert顯示文字Script Done. 在第二個script段落中用alert顯示變數myName的值, 但myName是在alert之後才定義並行指派值. 隨後再次用alert列出myName的值.

在執行程式之後可以發現, 因變數myEmail始終沒有定義而導致alert(myEmail);那一行發生錯誤, 第一個script段落因此中止沒有繼續執行，隨後用alert顯示文字Script Done並沒有發生.

在第二個script段落執行結果和第一個script段落不同. 第二個script段落中的程式有被執行完畢.第二個script段落中的第一個alert(myName);因變數myName隨後有被定義, 因此沒有發生錯誤. 但因JavaScript只是把變數myName的定義往前提, 並沒有執行指派值Tom給變數myName, 所以alert(myName);顯示的是undefined.

在第二個script段落中執行第二個alert(myName);時因該指令發生在var myName="Tom";之後, 變數myName的值已有指派, 所以第二個alert(myName);指令顯示的是Tom.

第二個script段落中程式效果同

                             var myName;
                             alert(myName);
                             myName="Tom";
                             alert(myName);
                   

範例

JavaScript中的函數也是受Hoisting功能影響. 在本例中, 我們先行呼叫函數sayHello(), 並在下方才定義sayHello()函數.

程式執行結果如下.

JavaScript 函數也可以採用函數表示式(function expression)的方式定義. 語法如下:

語法:

                            var variable = function() {
                                   ---要重覆使用的程式碼---
                            };

執行:

                            variable();

此處的variable為我們所取的變數名稱. function關鍵字後不需再給函數名稱. 注意函數结尾右大括號後必須加分號.


範例

在本例中我們用函數表示式定義一函數回傳3.

程式執行結果如下.

請注意用函數表示式定義的函數是沒有Hoisting效果的.

上圖中的程式碼在執行第一個alert(myFun2());因執行時myFun2()無定義已發生錯誤，因此中止沒有繼續執行. 所以用函數表示式定義函數時不能先呼叫再隨後定義函數，而原先定義函數的方式却是可以的.

PS: 版權所有,侵犯著作權必告.