實例詳解JavaScript中立即執行函數

js立即執行函數可以讓你的函數在創建後立即執行，js立即執行函數模式是一種語法，可以讓你的函數在定義後立即被執行，這種模式本質上就是函數表達式(命名的或匿名的)，在創建後立即執行。 javascript和其他程式語言相比比較隨意，所以javascript程式碼充滿各種奇葩的寫法，有時霧裡看花，當然，能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要為大家介紹了關於JavaScript中立即執行函數的相關資料，需要的朋友可以參考下。

前言

( function(){…} )()和( function (){…} () )是兩個javascript立即執行函數的常見寫法，最初我以為是一個括號包裹匿名函數，再在後面加個括號呼叫函數，最後達到函數定義後立即執行的目的，後來發現加括號的原因並非如此。

下面話不多說了，來一起看看詳細的介紹吧。

通常我們聲明一個函數有以下幾種方式：

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

如果你看過一些自訂控制項的話你會發現他們大多都是沿用這種寫法：

(function() {
 "
 // 这里开始写功能需求
 })();

這是我們常說的立即執行函數(IIFE)，顧名思義，也就是說這個函數是立即執行函數體的，不需要你額外去主動的去調用，一般情況下我們只對匿名函數使用IIFE ，這麼做有兩個目的：

     一是不必為函數命名，避免了污染全域變數

     二是IIFE內部形成了一個單獨的作用域，可以封裝一些外部無法讀取的私有變數。

如果看到這兩句話無法理解，那麼先從IIFE的運作原理說起。

因為IIFE通常用於匿名函數，這裡就用簡單的匿名函數作為栗子：

var f = function(){
 console.log("f");
}
f();

我們發現這裡f只是這個匿名函數的一個引用變量，那麼既然f ()能夠呼叫這個函數，我把f替換成函數本身可以麼：

function(){
 console.log("f"); 
}();

運行之後得到如下結果：

Uncaught SyntaxError: Unexpected token (

產生這個錯誤的原因是，Javascript引擎看到function關鍵字之後，認為後面跟的是函數宣告語句，不應該以圓括號結尾。解決方法就是讓引擎知道，圓括號前面的部分不是函數定義語句，而是一個表達式，可以對此進行運算，這裡區分一下函數宣告和函數表達式：

1、函數宣告(即我們通常使用function x(){}來宣告一個函數)

function myFunction () { /* logic here */ }

2、函數表達式(類似以這種的形式)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

小學我們就學過用()括起來的表達式會先執行，就像下面這樣：

1+(2+3) //这里先运行小括号里面的内容没有意见撒

其實在javascript中小括號也有相似的作用，Javascript引擎看到function關鍵字會認為是函數宣告語句，那如果Javascript引擎優先看到小括號會怎麼樣：

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

函數成功執行了：

f //控制台输出

這種情況下Javascript引擎就會認為這是一個表達式，而不是函數聲明，當然要讓Javascript引擎認為這是一個表達式的方法還有很多：

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

回到前面的問題，為什麼說IIFE這種形式避免了污染全局變量，如果你見過別人寫的jquery插件，裡面通常會有類似這樣的程式碼：

(function($){
  "
  //插件实现代码
})(jQuery);

這裡的jquery其實是該匿名函數的參數，聯想一下我們呼叫匿名函數時候是用f()那麼匿名帶參數的就是f (args)對吧，這裡把jquery當作參數傳入該函數，那麼在函數內部使用形參$的時候就不會影響到外部環境，因為有些插件也會用到$這個限定符，你在這個函數內部可以隨意折騰。

以上，過程中參考了以下兩篇文章：

javascript立即執行某個函數：插件中function(){}()再思考

JavaScript中的立即執行函數

相關推薦：

分析function前加運算子實現立即執行函數

##################################################################################### #JavaScript匿名、具名函數與立即執行函數IIFE詳解############JS中的立即執行函數#######

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