js函數中的自執行函數

我在寫程式碼時候常常會在tpl的<script>裡寫類似的程式碼：</script>

$(function(){
    alert("我好饿");
});

剛開始的時候只知道寫了它不需要調用，直接執行，就這樣依葫蘆畫瓢，我寫了很多程式碼。說這，還要說說這貨的載入順序，如果把程式碼直接寫到script標籤裡，當頁面載入完這個script標籤就會執行裡邊的程式碼了。如果在這程式碼裡用到了未載入的dom或呼叫了未載入的方法，是會報錯的。言歸正傳，這個函數其實就是自執行函數，很多人會比較專業稱為「立即呼叫的函數表達式」。

在這裡，我引用下limlimlim的博客，感覺比較專業...原址

當你聲明類似function foo(){}或var foo = function(){}函數的時候，透過在後面加個括弧就可以實現自執行，例如foo()，看程式碼：

// 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了，比如foo()，// 因为foo仅仅是function() { /* code */ }这个表达式的一个引用
 var foo = function(){ /* code */ } 
// ...是不是意味着后面加个括弧都可以自动执行？
 function(){ /* code */ }(); // SyntaxError: Unexpected token (//

上述程式碼，如果甚至運行，第2個程式碼會出錯，因為在解析器解析全域的function或function內部function關鍵字的時候，預設是認為function聲明，而不是function表達式，如果你不顯示告訴編譯器，它預設會聲明成一個缺少名字的function，並且拋出一個語法錯誤訊息，因為function聲明需要一個名字。

有趣的是，即使你為上面那個錯誤的程式碼加上名字，他也會提示文法錯誤，只不過和上面的原因不一樣。在一個表達式後面加上括號()，表達式會立即執行，但是在一個語句後面加上括號()，是完全不一樣的意思，他的只是分組運算子。

// 下面这个function在语法上是没问题的，但是依然只是一个语句// 加上括号()以后依然会报错，因为分组操作符需要包含表达式
 function foo(){ /* code */ }(); // SyntaxError: Unexpected token )
 // 但是如果你在括弧()里传入一个表达式，将不会有异常抛出// 但是foo函数依然不会执行function foo(){ /* code */ }( 1 ); 
// 因为它完全等价于下面这个代码，一个function声明后面，又声明了一个毫无关系的表达式： function foo(){ /* code */ }
 
( 1 );

要解決上述問題，非常簡單，我們只需要用大括弧將程式碼的程式碼全部括住就行了，因為JavaScript裡括弧()裡面不能包含語句，所以在這一點上，解析器在解析function關鍵字的時候，會將對應的程式碼解析成function表達式，而不是function宣告。

// 下面2个括弧()都会立即执行(function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了// 不过，请注意下一章节的内容解释var i = function () { return 10; } ();true && function () { /* code */ } ();0, function () { /* code */ } ();// 如果你不在意返回值，或者不怕难以阅读// 你甚至可以在function前面加一元操作符号!function () { /* code */ } ();~function () { /* code */ } ();-function () { /* code */ } ();+function () { /* code */ } ();// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率// new function () { /* code */ }new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()

上面所說的括弧是消除歧義的，其實壓根就沒必要，因為括弧本來內部本來期望的就是函數表達式，但是我們依然用它，主要是為了方便開發人員閱讀，當你讓這些已經自動執行的表達式賦值給一個變數的時候，我們看到開頭有括弧(，很快就能明白，而不需要將程式碼拉到最後看看到底有沒有加括弧。立即呼叫的函數表達式（Immediately-Invoked Function Expression）這個名稱，作者又舉了一堆例子來解釋，好吧，我們來看看：

// 这是一个自执行的函数，函数内部执行自身，递归function foo() { foo(); }// 这是一个自执行的匿名函数，因为没有标示名称// 必须使用arguments.callee属性来执行自己var foo = function () { arguments.callee(); };// 这可能也是一个自执行的匿名函数，仅仅是foo标示名称引用它自身// 如果你将foo改变成其它的，你将得到一个used-to-self-execute匿名函数var foo = function () { foo(); };// 有些人叫这个是自执行的匿名函数（即便它不是），因为它没有调用自身，它只是立即执行而已。(function () { /* code */ } ());// 为函数表达式添加一个标示名称，可以方便Debug// 但一定命名了，这个函数就不再是匿名的了(function foo() { /* code */ } ());// 立即调用的函数表达式（IIFE）也可以自执行，不过可能不常用罢了(function () { arguments.callee(); } ());
(function foo() { foo(); } ());// 另外，下面的代码在黑莓5里执行会出错，因为在一个命名的函数表达式里，他的名称是undefined// 呵呵，奇怪(function foo() { foo(); } ());

希望這裡的一些例子，可以讓大家明白，什麼叫自執行，什麼叫立即調用。 #，這是我之後要學習的重要東西，當然在這之前還有閉包（頭大）

給各位看看例子吧

// 创建一个立即调用的匿名函数表达式// return一个变量，其中这个变量里包含你要暴露的东西// 返回的这个变量将赋值给counter，而不是外面声明的function自身var counter = (function () {var i = 0;return {
        get: function () {return i;
        },
        set: function (val) {
            i = val;
        },
        increment: function () {return ++i;
        }
    };
} ());// counter是一个带有多个属性的对象，上面的代码对于属性的体现其实是方法counter.get(); // 0counter.set(3);
counter.increment(); // 4counter.increment(); // 5counter.i; // undefined 因为i不是返回对象的属性i; // 引用错误: i 没有定义（因为i只存在于闭包）

 

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