IT工程師數位筆記本

原文地址：https://github.com/airbnb/javascript/issues/21#issuecomment-10203921

一、寫在前面

　　本文將一如既往地遵循從自身理解出發，而非100%按原文逐句翻譯的方式進行“偽翻譯”，若有謬誤請各位指正，謝謝！！

二、介紹

　　IIFE（the Immediately Invoked Function Expression）：定義函數的同時并執行該函數。

三、常見的使用方式

!function(){}(); // 返回 true
~function(){}(); // 返回 -1
+function(){}(); // 返回NaN
-function(){}(); // 返回NaN
void function(){}(); // 返回undefined

四、本文要討論的使用方式

　　1. 方式一

(function(){   
})();

　　2. 方式二（大神crockford推薦的方式）：

(function(){
}());

五、兩種使用方式的區別

讓我們通過下面這個缺少分號（;）的例子來初探它們的區別吧！

方式一的示例：

(function(){
    console.log('module1');
})()(function(){
    console.log('module2');
})();
/*
 * 返回 module1 
 * 然后拋TypeError: undefined is not a function異常
 */

方式二的示例：

(function(){
   console.log('module1');
}())(function(){
   console.log('module2');
}());
/*
 * 返回 module1
 * 返回 module2
 * 最后拋出TypeError: undefined is not a function異常
 */

六、解構現象理解本質

 首先要牢記一條規則：括號會馬上執行其前面的表達式。下面讓我們逐步分解這兩個示例，好好理解一下吧！

方式一的示例分解：

  1. 第一步先執行 (function(){console.log('module1');})() ，返回的結果是 undefined ，最后剩下將被執行的代碼是 undefined(function(){console.log('module2');})(); ;

  2. 第二步根據括號會馬上執行其前面的表達式這一規則，將執行 undefined(function(){console.log('module');}) ，很明顯undefined不是有效函數，這樣的調用方式必須拋異常的。

方式二的示例分解：

  1. 第一步先執行 function(){console.log('module1');}() ，返回結果是 (undefined) ，再經過括號運算符得到 undefined ，最后剩下將被執行的代碼是 undefined(function(){console.log('module2');}());  ;

  2. 第二步將執行function(){console.log('module2');}() ，返回結果是 undefined ，最后剩下將被執行的代碼是 undefined(undefined);  ;

  3. 第三步當然是拋異常了！

七、提倡的使用方式

想避免因少寫一個分號造成不必要的困擾，那么就像下面的那樣寫吧！

;(function(){
  console.log('IIFE');
}());

原創文章，轉載請注明來自^_^肥仔John[http://fsjohnhuang.cnblogs.com]

本文地址：http://www.cnblogs.com/fsjohnhuang/p/3755624.html （本篇完）