1. 程式人生 > >IIFE(立即執行函數表達式)

IIFE(立即執行函數表達式)

fin div 開頭 空格 賦值 error ted def clas

我們經常會看到這樣的寫法:

;(fuction () {
    // do something
})()

這就是一個簡單的IIFE(立即執行函數表達式,immediately-invoked function expression)了。

這樣的寫法有什麽好處呢?來簡單分析一下。

1. 開頭的分號

我們都知道,js是可以加分號或者不加分號的,在某些情況下,不加分號會讓解析器解析出錯,舉個例子:

var 
    a = 0
    , b = 0
;
a = b + 3
(b = a)
// Uncaught TypeError: 3 is not a function

解析代碼的時候,a = b + 3和(b = a)這兩條語句之間沒有明確的分界,回車和空格會自動被忽略。解析器會認為這是一句。所以,此時會認為3是一個函數,b=a是他的參數。
在知乎的這個問題下,尤大做了解釋。

真正會導致上下行解析出問題的 token 有 5 個:括號,方括號,正則開頭的斜杠,加號,減號。我還從沒見過實際代碼中用正則、加號、減號作為行首的情況,所以總結下來就是一句話:一行開頭是括號或者方括號的時候加上分號就可以了,其他時候全部不需要。其實即使是這兩種情況,在實際代碼中也頗為少見。

ok,回到我們的例子,我們的例子就是以括號開頭的,如果上一個語句沒有加分號,很可能會出現這樣問題,這個分號就是為了防止這樣的情況發生,稱之為防禦性分號。

2. function(){}

函數有兩種聲明方式:

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

這兩種聲明方式的不同之處在於,使用var聲明的函數不會自動提升到頂部。也就是說,不能在var聲明函數的語句之前調用函數,否則會拋出undefined的錯誤。
function () {}這種形式被稱為匿名函數。匿名函數沒有名字,也就是沒有指針,是無法在其他地方調用的。
將匿名函數賦值給foo,則可以通過foo來調用。
當然還有辦法調用它,就是例子中的兩對括號。第一對括號將匿名函數包裝成了一個表達式,而第二對括號意思就是立即執行它。

function () {console.log(‘a‘)} // 報錯 Uncaught SyntaxError: Unexpected token (
(function () {console.log(‘a‘)}) // 返回函數定義 ? () {console.log(‘a‘)},沒有log
(function () {console.log(‘a‘)})() // a
function foo() {console.log(‘a‘)}() // 報錯 Uncaught SyntaxError: Unexpected token )

第一行,因為不是合法的聲明方式,希望找到函數名的地方是‘(’,所以拋出了該異常。
第二行,()中的語句被當成了表達式,解析器會認為是var聲明的方式。
第三行,自執行。
第四行,function foo() {console.log(‘a‘)}是正確的函數聲明方式,被正確解析。接下來的一對括號依次解析,括號裏需要有表達式,但是沒有,所以會拋出這樣的異常。

3. 好處

IIFE的好處就是不會汙染全局變量,就在當前的函數體的作用域下進行操作,保證了父作用域的幹凈,如果return出一些函數,那這些函數就形成了閉包。
我們常用IIFE來寫module。

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
})()

Refer:

  1. 維基百科:立即調用函數表達式
  2. 知乎:JavaScript 語句後應該加分號麽?

IIFE(立即執行函數表達式)