執行這段程式碼時,打開開發者工具的 conslole 會得到結果:
firefox
hahaha
執行這段程式碼時,打開開發者工具的 conslole 會得到結果:
firefox
undefined
執行這段程式碼時,打開開發者工具的 conslole 會得到結果:
firefox
a is not defined
為什麼範例二的 console.log(a) 是出現 undefined 呢?
為什麼還能既具執行 function 呢?
這樣的步驟稱為「Hoisting」提升現象,即使函數在之後才宣告,依然執行它。而 console.log(a) 的結果跑出 undefined 雖然不是我們要的結果,但依然是可以使用的,所以不會得到像範例三的錯誤或是 not defined。
我們寫的 code 並不是直接被執行,而是 JavaScript 轉成電腦看得懂的東西。
接下來,我們來了解執行環境中的創造(creation)階段,在創造階段時全域物件與 this 已經存在記憶體中。
變數與函數是在創造階段被設定的,這個步驟就是「Hoisting」提升現象。並不是真的把你寫的程式碼移到最上方,在你逐行執行程式碼的時候,JavaScript 的變數以及函數已經在記憶體中。
而變數的情況有些不同,JavaScript 為 a 變數空出記憶體空間,因為她不知道值的答案是什麼,直到它被執行後才知道。因此會在console.log(a) 的結果跑出 undefined 替代文字。
undefined --->「我還不知道它的值」
即使我們 var a; 不放值進去,console 出來的結果依然是 undefine。因為所有JavaScript 的變數一開始都會被定為 undefine,而函數則是完全被設定好放進記憶體中。
結論:
依賴 Hoisting 可能會遇到問題,所以並不是個好的使用方法。所以建議使用範例一的方法會比較妥當。
我們可以呼叫函數,就算它之後才做宣告,因為我們寫的 code 不會直接被執行,而會經過 JavaScript 的轉換。