DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 深入解析JavaScript中的立即執行函數
深入解析JavaScript中的立即執行函數
編輯:JavaScript基礎知識     

它是什麼
在 JavaScript 裡,每個函數,當被調用時,都會創建一個新的執行上下文。因為在函數裡定義的變量和函數是唯一在內部被訪問的變量,而不是在外部被訪問的變量,當調用函數時,函數提供的上下文提供了一個非常簡單的方法創建私有變量。

function makeCounter() {
  var i = 0;
  return function(){
    console.log(++i);
  };  
}

//記住:`counter`和`counter2`都有他們自己的變量 `i`

var counter = makeCounter();
counter();//1
counter();//2

var counter2 = makeCounter();
counter2();//1
counter2();//2

i;//ReferenceError: i is not defined(它只存在於makeCounter裡)

在許多情況下,你可能並不需要makeWhatever這樣的函數返回多次累加值,並且可以只調用一次得到一個單一的值,在其他一些情況裡,你甚至不需要明確的知道返回值。

它的核心
現在,無論你定義一個函數像這樣function foo(){}或者var foo = function(){},調用時,你都需要在後面加上一對圓括號,像這樣foo()。

//向下面這樣定義的函數可以通過在函數名後加一對括號進行調用,像這樣`foo()`,
//因為foo相對於函數表達式`function(){/* code */}`只是一個引用變量

var foo = function(){/* code */}

//那這可以說明函數表達式可以通過在其後加上一對括號自己調用自己嗎?

function(){ /* code */}(); //SyntaxError: Unexpected token (

正如你所看到的,這裡捕獲了一個錯誤。當圓括號為了調用函數出現在函數後面時,無論在全局環境或者局部環境裡遇到了這樣的function關鍵字,默認的,它會將它當作是一個函數聲明,而不是函數表達式,如果你不明確的告訴圓括號它是一個表達式,它會將其當作沒有名字的函數聲明並且拋出一個錯誤,因為函數聲明需要一個名字。

問題1:這裡我麼可以思考一個問題,我們是不是也可以像這樣直接調用函數 var foo = function(){console.log(1)}(),答案是可以的。
問題2:同樣的,我們還可以思考一個問題,像這樣的函數聲明在後面加上圓括號被直接調用,又會出現什麼情況呢?請看下面的解答。

函數,圓括號,錯誤
有趣的是,如果你為一個函數指定一個名字並在它後面放一對圓括號,同樣的也會拋出錯誤,但這次是因為另外一個原因。當圓括號放在一個函數表達式後面指明了這是一個被調用的函數,而圓括號放在一個聲明後面便意味著完全的和前面的函數聲明分開了,此時圓括號只是一個簡單的代表一個括號(用來控制運算優先的括號)。

//然而函數聲明語法上是無效的,它仍然是一個聲明,緊跟著的圓括號是無效的,因為圓括號裡需要包含表達式

function foo(){ /* code */ }();//SyntaxError: Unexpected token

//現在,你把一個表達式放在圓括號裡,沒有拋出錯誤...,但是函數也並沒有執行,因為:

function foo(){/* code */}(1)

//它等同於如下,一個函數聲明跟著一個完全沒有關系的表達式:

function foo(){/* code */}
(1);

立即執行函數表達式(IIFE)
幸運的是,修正語法錯誤很簡單。最流行的也最被接受的方法是將函數聲明包裹在圓括號裡來告訴語法分析器去表達一個函數表達式,因為在Javascript裡,圓括號不能包含聲明。因為這點,當圓括號為了包裹函數碰上了 function關鍵詞,它便知道將它作為一個函數表達式去解析而不是函數聲明。注意理解這裡的圓括號和上面的圓括號遇到函數時的表現是不一樣的,也就是說。

當圓括號出現在匿名函數的末尾想要調用函數時,它會默認將函數當成是函數聲明。
當圓括號包裹函數時,它會默認將函數作為表達式去解析,而不是函數聲明。

//這兩種模式都可以被用來立即調用一個函數表達式,利用函數的執行來創造私有變量

(function(){/* code */}());//Crockford recommends this one,括號內的表達式代表函數立即調用表達式
(function(){/* code */})();//But this one works just as well,括號內的表達式代表函數表達式

// Because the point of the parens or coercing operators is to disambiguate
// between function expressions and function declarations, they can be
// omitted when the parser already expects an expression (but please see the
// "important note" below).

var i = function(){return 10;}();
true && function(){/*code*/}();
0,function(){}();

//如果你並不關心返回值,或者讓你的代碼盡可能的易讀,你可以通過在你的函數前面帶上一個一元操作符來存儲字節

!function(){/* code */}();
~function(){/* code */}();
-function(){/* code */}();
+function(){/* code */}();

// Here's another variation, from @kuvos - I'm not sure of the performance
// implications, if any, of using the `new` keyword, but it works.
// http://twitter.com/kuvos/status/18209252090847232

new function(){ /* code */ }
new function(){ /* code */ }() // Only need parens if passing arguments

關於括號的重要筆記
在一些情況下,當額外的帶著歧義的括號圍繞在函數表達式周圍是沒有必要的(因為這時候的括號已經將其作為一個表達式去表達),但當括號用於調用函數表達式時,這仍然是一個好主意。

這樣的括號指明函數表達式將會被立即調用,並且變量將會儲存函數的結果,而不是函數本身。當這是一個非常長的函數表達式時,這可以節約比人閱讀你代碼的時間,不用滾到頁面底部去看這個函數是否被調用。

作為規則,當你書寫清楚明晰的代碼時,有必要阻止 JavaScript 拋出錯誤的,同樣也有必要阻止其他開發者對你拋出錯誤 WTFError!

保存閉包的狀態
就像當函數通過他們的名字被調用時,參數會被傳遞,而當函數表達式被立即調用時,參數也會被傳遞。一個立即調用的函數表達式可以用來鎖定值並且有效的保存此時的狀態,因為任何定義在一個函數內的函數都可以使用外面函數傳遞進來的參數和變量(這種關系被叫做閉包)。

// 它的運行原理可能並不像你想的那樣,因為`i`的值從來沒有被鎖定。
// 相反的,每個鏈接,當被點擊時(循環已經被很好的執行完畢),因此會彈出所有元素的總數,
// 因為這是 `i` 此時的真實值。

var elems = document.getElementsByTagName('a');
for(var i = 0;i < elems.length; i++ ) {
  elems[i].addEventListener('click',function(e){
    e.preventDefault();
    alert('I am link #' + i)
    },false);
}

// 而像下面這樣改寫,便可以了,因為在IIFE裡,`i`值被鎖定在了`lockedInIndex`裡。
// 在循環結束執行時,盡管`i`值的數值是所有元素的總和,但每一次函數表達式被調用時,
// IIFE 裡的 `lockedInIndex` 值都是`i`傳給它的值,所以當鏈接被點擊時,正確的值被彈出。

var elems = document.getElementsByTagName('a');
for(var i = 0;i < elems.length;i++) {
  (function(lockedInIndex){
    elems[i].addEventListener('click',function(e){
      e.preventDefault();
      alert('I am link #' + lockedInIndex);
      },false)
  })(i);
}

//你同樣可以像下面這樣使用IIFE,僅僅只用括號包括點擊處理函數,並不包含整個`addEventListener`。
//無論用哪種方式,這兩個例子都可以用IIFE將值鎖定,不過我發現前面一個例子更可讀

var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {
  elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    };
    })( i ),false);
  }

記住,在這最後兩個例子裡,lockedInIndex可以沒有任何問題的訪問i,但是作為函數的參數使用一個不同的命名標識符可以使概念更加容易的被解釋。

立即執行函數一個最顯著的優勢是就算它沒有命名或者說是匿名,函數表達式也可以在沒有使用標識符的情況下被立即調用,一個閉包也可以在沒有當前變量污染的情況下被使用。

自執行匿名函數(“Self-executing anonymous function”)有什麼問題呢?

你看到它已經被提到好幾次了,但是它仍然不是那麼清楚的被解釋,我提議將術語改成"Immediately-Invoked Function Expression",或者,IIFE,如果你喜歡縮寫的話。

什麼是Immediately-Invoked Function Expression呢?它使一個被立即調用的函數表達式。就像引導你去調用的函數表達式。

我想Javascript社區的成員應該可以在他們的文章裡或者陳述裡接受術語,Immediately-Invoked Function Expression和 IIFE,因為我感覺這樣更容易讓這個概念被理解,並且術語"self-executing anonymous function"真的也不夠精確。

//下面是個自執行函數,遞歸的調用自己本身

function foo(){foo();};

//這是一個自執行匿名函數。因為它沒有標識符,它必須是使用`arguments.callee`屬性來調用它自己

var foo = function(){arguments.callee();};

//這也許算是一個自執行匿名函數,但是僅僅當`foo`標識符作為它的引用時,如果你將它換成用`foo`來調用同樣可行

var foo = function(){foo();};

//有些人像這樣叫'self-executing anonymous function'下面的函數,即使它不是自執行的,因為它並沒有調用它自己。然後,它只是被立即調用了而已。

(function(){ /*code*/ }());

//為函數表達式增加標識符(也就是說創造一個命名函數)對我們的調試會有很大幫助。一旦命名,函數將不再匿名。

(function foo(){/* code */}());

//IIFEs同樣也可以自執行,盡管,也許他不是最有用的模式

(function(){arguments.callee();}())
(function foo(){foo();}())

// One last thing to note: this will cause an error in BlackBerry 5, because
// inside a named function expression, that name is undefined. Awesome, huh?

(function foo(){ foo(); }());

希望上面的例子可以讓你更加清楚的知道術語'self-executing'是有一些誤導的,因為他並不是執行自己的函數,盡管函數已經被執行。同樣的,匿名函數也沒用必要特別指出,因為,Immediately Invoked Function Expression,既可以是命名函數也可以匿名函數。

最後:模塊模式
當我調用函數表達式時,如果我不至少一次的提醒我自己關於模塊模式,我便很可能會忽略它。如果你並不屬性 JavaScript 裡的模塊模式,它和我下面的例子很像,但是返回值用對象代替了函數。

var counter = (function(){
  var i = 0;
  return {
    get: function(){
      return i;
    },
    set: function(val){
      i = val;
    },
    increment: function(){
      return ++i;
    }
  }
  }());
  counter.get();//0
  counter.set(3);
  counter.increment();//4
  counter.increment();//5

  conuter.i;//undefined (`i` is not a property of the returned object)
  i;//ReferenceError: i is not defined (it only exists inside the closure)

模塊模式方法不僅相當的厲害而且簡單。非常少的代碼,你可以有效的利用與方法和屬性相關的命名,在一個對象裡,組織全部的模塊代碼即最小化了全局變量的污染也創造了使用變量。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved