平常再用js寫函數的時候,一般都是以慣例function fn () {} 的方式來宣告一個函數,在閱讀一些優秀插件的時候又不免見到var fn = function () {} 這種函數的創建,究竟他們用起來有什麼差別呢,今天就本著打破砂鍋問到底的精神,好好來說說這個讓人神魂顛倒的--函數聲明。
函數宣告
函數宣告範例程式碼
這樣我們就聲明了一個名稱為fn的函數,這裡出個思考,你認為在這個函數的上面來呼叫他的話會執行嗎?還是會報錯?
控制台輸出結果:
是的,此時fn函數是可以被呼叫的,這裡來總結下原因。
總結:
1:此時fn函數是變數的結果,預設儲存在全域上下文的變數中(可用 window.函數名稱 來驗證)
2:此方式為函數聲明,在進入全域上下文階段創建,程式碼執行階段,它們已經可用。 ps:javaScript每次進入方法時都會先初始化上下文環境(由全域 → 局部)
3:它可以影響變數物件(僅影響儲存在上下文中的變數)
函數表達式
函數表達式範例程式碼
這樣我們就聲明了一個匿名函數,並且把它的引用指向了變數fn?
再次在該表達式宣告的函數上下方各呼叫一次,來看控制台的輸出結果。
控制台列印結果:
可以看到程式碼執行到第一次呼叫fn()函數的時候,提示:fn is not a function (fn 不是一個方法),遇到錯誤而終止運行。
這說明在第一次呼叫fn()的同時,var fn 變數並沒有做為全域物件的一個屬性而存在,且 fn 所引用的匿名函數上下文也沒有被初始化,所以在他之前呼叫失敗。
控制台列印結果:
可以看出,在該表達式函數之後來呼叫是可以的,來總結下那是為什麼呢?
總結:
1:首先變數本身不做為一個函數存在,而是一個匿名函數的參考(值類型的不屬於引用)
2:在程式碼執行階段,初始化全域上下文時,它沒有被做為全域的一個屬性而存在,所以不會造成變數物件的污染
3:此類型的聲明一般在插件的開發較常見,也可做為閉包中回呼函數的呼叫
所以 function fn () {} 不等於 var fn = function () {} ,他們有本質上的差別。
以上就是本文的全部內容了,思路很清晰,對比也很明確,是篇非常不錯的文章,小夥伴們一定要仔細研讀下