詳細解答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(&#39;click&#39;,function(e){
    e.preventDefault();
    alert(&#39;I am link #&#39; + i)
    },false);
}

// 而像下面这样改写，便可以了，因为在IIFE里，`i`值被锁定在了`lockedInIndex`里。
// 在循环结束执行时，尽管`i`值的数值是所有元素的总和，但每一次函数表达式被调用时，
// IIFE 里的 `lockedInIndex` 值都是`i`传给它的值,所以当链接被点击时，正确的值被弹出。

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

//你同样可以像下面这样使用IIFE，仅仅只用括号包括点击处理函数，并不包含整个`addEventListener`。
//无论用哪种方式，这两个例子都可以用IIFE将值锁定，不过我发现前面一个例子更可读

var elems = document.getElementsByTagName( &#39;a&#39; );

for ( var i = 0; i < elems.length; i++ ) {
  elems[ i ].addEventListener( &#39;click&#39;, (function( lockedInIndex ){
    return function(e){
      e.preventDefault();
      alert( &#39;I am link #&#39; + 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)

模块模式方法不仅相当的厉害而且简单。非常少的代码，你可以有效的利用与方法和属性相关的命名，在一个对象里，组织全部的模块代码即最小化了全局变量的污染也创造了使用变量。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript中各数制转换全面总结（图文教程）

原生JavaScript来实现对dom元素class的操作方法（图文教程）

JavaScript中的字符串连接问题（图文教程）

以上是詳細解答JavaScript中的立即執行函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！