淺談javascript 函數(shù)表達式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達式.
區(qū)別如下:
1).以函數(shù)聲明的方法定義的函數(shù),函數(shù)名是必須的,而函數(shù)表達式的函數(shù)名是可選的.
2).以函數(shù)聲明的方法定義的函數(shù),函數(shù)可以在函數(shù)聲明之前調(diào)用,而函數(shù)表達式的函數(shù)只能在聲明之后調(diào)用.
3).以函數(shù)聲明的方法定義的函數(shù)并不是真正的聲明,它們僅僅可以出現(xiàn)在全局中,或者嵌套在其他的函數(shù)中,但是它們不能出現(xiàn)在循環(huán),條件或者try/catch/finally中,而
函數(shù)表達式可以在任何地方聲明.
下面分別用兩種方法定義函數(shù):
//函數(shù)聲明式 function greeting(){ console.log("hello world"); } //函數(shù)表達式 var greeting = function(){ console.log("hello world"); }
下面一個有趣的javascript:
function f() { console.log('I am outside!'); } (function () { if(false) { // 重復聲明一次函數(shù)f function f() { console.log('I am inside!'); } } f(); }());
會輸出什么呢?第一反應(yīng)應(yīng)該是"I am outside"吧. 結(jié)果在chrome中輸出"I am inside",IE11直接報錯,firefox低一點的版本輸出"I am outside"...
chrome輸出的結(jié)果很明確的反應(yīng)了用函數(shù)聲明式聲明的函數(shù)的特點--函數(shù)在聲明之前就可以調(diào)用.
IE報錯顯示缺少對象,因為函數(shù)聲明在了條件里,違背了函數(shù)聲明式的原則.
函數(shù)表達式的作用域:
如果函數(shù)表達式聲明的函數(shù)有函數(shù)名,那么這個函數(shù)名就相當于這個函數(shù)的一個局部變量,只能在函數(shù)內(nèi)部調(diào)用,舉個栗子:
var f = function fact(x) { if (x <= 1) return 1; else return x*fact(x-1); }; alert(fact()); // Uncaught ReferenceError: fact is not defined
fact()在函數(shù)內(nèi)部可以調(diào)用,在函數(shù)外部調(diào)用就會報錯:fact未定義.
fact
我們再來詳細看下
函數(shù)聲明
函數(shù)聲明示例代碼
代碼如下:
function fn () { console.log('fn 函數(shù)執(zhí)行..'); // code.. }
這樣我們就聲明了一個名稱為fn的函數(shù),這里出個思考,你認為在這個函數(shù)的上面來調(diào)用他的話會執(zhí)行嗎?還是會報錯?
代碼如下:fn(); // 在之前調(diào)用我們聲明的fn函數(shù) function fn () { console.log('fn 函數(shù)執(zhí)行..'); // code..}
控制臺輸出結(jié)果:
是的,此時fn函數(shù)是可以被調(diào)用到的,這里來總結(jié)下原因。
總結(jié):
1:此時fn函數(shù)是變量的結(jié)果,默認存儲在全局上下文的變量中(可用 window.函數(shù)名 來驗證)
2:此方式為函數(shù)聲明,在進入全局上下文階段創(chuàng)建,代碼執(zhí)行階段,它們已經(jīng)可用。ps:javaScript在每次進入方法時都會先初始化上下文環(huán)境(由全局 → 局部)
3:它可以影響變量對象(僅影響存儲在上下文中的變量)
函數(shù)表達式
函數(shù)表達式示例代碼
代碼如下:
var fn = function () { console.log('fn 函數(shù)【表達式】聲明執(zhí)行..') // code.. }
這樣我們就聲明了一個匿名函數(shù),并且把它的引用指向了變量fn?
再次在該表達式聲明的函數(shù)上下方各調(diào)用一次,來看控制臺的輸出結(jié)果。
代碼如下:
// 為了清晰的看到控制臺的輸出,我們在各自調(diào)用前后做個標記,增加可讀性。 console.log('之前調(diào)用開始..'); fn(); console.log('之前調(diào)用結(jié)束..'); var fn = function () { console.log('fn 函數(shù)【表達式】聲明執(zhí)行..') // code.. } console.log('之后調(diào)用開始..'); fn(); console.log('之后調(diào)用開始..');
控制臺打印結(jié)果:
可以看到代碼在執(zhí)行到第一次調(diào)用fn()函數(shù)的時候,提示:fn is not a function (fn 不是一個方法),遇到錯誤而終止運行。
這說明在第一次調(diào)用fn()的同時,var fn 變量沒有做為全局對象的一個屬性而存在,且 fn 引用的匿名函數(shù)上下文也沒有被初始化,所以在他之前調(diào)用失敗。
代碼如下:
// 現(xiàn)在先把之前的調(diào)用邏輯給注釋掉,再看下控制臺的輸出 // console.log('之前調(diào)用開始..'); // fn(); // console.log('之前調(diào)用結(jié)束..'); var fn = function () { console.log('fn 函數(shù)【表達式】聲明執(zhí)行..') // code.. } console.log('之后調(diào)用開始..'); fn(); // 在表達式之后調(diào)用 console.log('之后調(diào)用開始..');
控制臺打印結(jié)果:
可以看出,在該表達式函數(shù)之后來調(diào)用是可以的,來總結(jié)下那是為什么呢?
總結(jié):
1:首先變量本身不做為一個函數(shù)存在,而是一個匿名函數(shù)的引用(值類型的不屬于引用)
2:在代碼執(zhí)行階段,初始化全局上下文時,它沒有被做為全局的一個屬性而存在,所以不會造成變量對象的污染
3:該類型的聲明一般在插件的開發(fā)比較常見,也可做為閉包中回調(diào)函數(shù)的調(diào)用
所以 function fn () {} 并不等于 var fn = function () {} ,他們有本質(zhì)上的區(qū)別。
以上就是本文的全部內(nèi)容了,思路很清晰,對比也很明確,是篇非常不錯的文章,小伙伴們一定要仔細研讀下
相關(guān)文章
javascript實現(xiàn)支持移動設(shè)備畫廊
本文通過純javascript技術(shù)實現(xiàn)支持移動設(shè)備畫廊,支持移動設(shè)備手勢操作,感興趣的朋友一起來學習吧2015-08-08梳理總結(jié)JavaScript的23個String方法
文章主要介紹了梳理總結(jié)JavaScript的23個String方法,JavaScript?中的String類型用于表示文本型的數(shù)據(jù)。它是由無符號整數(shù)值作為元素而組成的集合,更多詳細內(nèi)容需要的朋友可以參考一下2022-07-07微信公眾號開發(fā) 實現(xiàn)點擊返回按鈕就返回到聊天界面
本文分享了微信公眾號開發(fā)實現(xiàn)點擊返回按鈕就返回到聊天界面的示例代碼。需要的朋友一起來看下吧2016-12-12基于原生js運動方式關(guān)鍵點的總結(jié)(推薦)
下面小編就為大家?guī)硪黄谠鷍s運動方式關(guān)鍵點的總結(jié)(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10JavaScript對表格或元素按文本,數(shù)字或日期排序的方法
這篇文章主要介紹了JavaScript對表格或元素按文本,數(shù)字或日期排序的方法,涉及javascript頁面元素操作及排序的相關(guān)技巧,需要的朋友可以參考下2015-05-05