Cover Credit to Slidin squares loader
進入函數提升(function Hoisting)介紹之前,先認識Javascript 的提升(Hoisting)概念是什麼。
Hoisting in Javascript
Javascript進入讀取程式碼之前,會先編譯執行的程式碼。
比喻來說,小A平常有蒐集食譜習慣,要去採買備料的前一晚,會先翻一下食譜,才知道明早去菜市場先經過第一家肉攤、第二家菜攤要買什麼。
呼應開頭提及JS Hoisting觀念「先準備在讀取」,而讀取方式會依據JS運行函數和變數兩者不同規則來處理,以上圖為例,可以想像小A先閱讀食譜,在已知菜市場攤販動線去買菜,提前擬定購物計畫,
如同在JS讀程式碼之前,已有既定存取程式碼方式來判斷如何進行Hoisting。
函數Functions
函數表述式(Function Expression)
在變數中賦值函式,調用後成功取值。以下方舉例,函式聲明(Function Declaration)是被var定義。
var meat=function beef(){
console.log('吃個oec牛肉麵吧');
}
beef():
//Output:吃個oec牛肉麵吧
函數陳述式(Function Statement)
將變數宣告寫入函式聲明中,在外部呼叫函式可以取值。
function beefnoodle(){
var meat='beef';
console.log('燒燙燙'+meat);
}
beefnoodle();
//Output:燒燙燙beef
函式陳述式常見於執行指令,不同於函式表述式會是由函數之外的變數帶進函數,在經過計算返值。
接下來,延伸上述例子往下看Hoisting。
函數Hoisting
我們可以透過兩種函式寫法暸解提升(Hoist)概念。
表述式Hoisting
函式表述式是由變數帶進函式賦予值,在呼叫函式取得計算結果,函數的表述式在第四行函數之後才會被執行,
如果呼叫寫在第四行之前,在第一行呼叫會得到undefined結果。
beef():
//Uncaught TypeError: undefined is not a function.
var beef=function (){
console.log('吃個oec牛肉麵吧');
}
beef();
//Output:吃個oec牛肉麵吧
陳述式Hoisting
不同於表述式(Function Statement),變數宣告寫在函式中,可以在函式之前被調用, 呼應開頭提及這跟JS和瀏覽器提前準備讀取有關,函式調用會被移至函式之前因此可成功取值。
cooking();
function cooking(){
var beef='牛肉';
var tomato='番茄';
console.log('有'+tomato+'的'+beef+'麵真4oec');
}
//Output:有番茄的牛肉麵真4oec
function cooking(){
var beef='牛肉';
var tomato='番茄';
console.log('有'+tomato+'的'+beef+'麵真4oec');
}
cooking();
//Output:有番茄的牛肉麵真4oec
函式陳述式在JS Hoisting會被置頂到作用域, 而表述式是由變數來定義函示取結果,需要等跑完表述式後呼叫才會返值,故呼叫應放在函式後方。
偶爾會畫圖來理解程式碼,若內文圖像對你理解有幫助,歡迎自行取用。
此為紀錄學習過程,如內容有誤,歡迎留言指教。
Abby
筆記一下