之前看了好多代碼,都有用到這種函數的寫法,但是都沒認真的去想為什么會這樣寫,今天開始想學習下jquery的源碼,發現jquery也是使用這種方式,用(function(window, undefined){})(window)包裹內部代碼,于是進一步的去學習了下。
要理解立即執行函數(function(){})(),先了解些函數的基本概念(函數聲明、函數表達式、匿名函數)。
函數聲明:使用function聲明函數,并指定函數名。
function setFn() { // coding }
函數表達式:使用function聲明函數,但未指定函數名,將匿名函數賦予一個變量。
var setFn = function() { // coding}
匿名函數:使用function關鍵字聲明函數,但未指定函數名。匿名函數屬于函數表達式,匿名函數有很多作用,賦予一個變量則創建函數,賦予一個事件則成為事件處理程序或創建閉包等等。
function() { // coding}
函數聲明與函數表達式的不同在于:
1. 函數聲明可在當前作用域下提前調用執行,函數表達式需等執行到該函數后,方可執行,不可提前調用。
setFn()function setFn() { // coding }// 正常,函數聲明可提前調用setFn()var setFn = function() { // coding} // 報錯,setFn未保存對函數的引用,函數調用需放在函數表達式后面
2. 函數表達式可直接在函數后加括號調用。
var setFn = function() { console.log(2)}()// 2 解析至此,可直接執行調用
立即執行函數(function(){})()可以看出很像函數表達式的調用,但為什么要加括號呢?如果不加括號:
function(){ console.log(1)}()// 報錯,函數需要函數名
解析: 雖然匿名函數屬于函數表達式,但未進行賦值,所以javascript解析時將開頭的function當做函數聲明,故報錯提示需要函數名
立即執行函數里面的函數必須是函數表達式,所以由var setFn = function() {}()可以理解為在匿名函數前加了 = 運算符后,將函數聲明轉化為函數表達式,所以拿!,+,-,()...等運算符來測試下是否如此。
!function(){ console.log(1)}()// 1 +function(){ console.log(2)}()// 2 -function(){ console.log(3)}()// 3 (function(){ console.log(4)})()// 4
由此可見,加運算符確實可將函數聲明轉化為函數表達式,而之所以使用括號,是因為括號相對其他運算符會更安全,可以減少不必要的麻煩。
立即執行函數與正常函數傳參形式是一致的。
(function(a, b){ console.log(a + b);})(1, 2)// 3
(function(){}())這樣寫的好處是在內部定義的變量不會跟外部的變量有沖突,達到保護內部變量的作用。