js-深入理解立即執行函數

什麼是立即執行函數（IIFE）

看過jQuery源碼的人應該知道，jQuery開篇用的就是立即執行函數。

立即執行函數常用於第三方庫，好處在於隔離作用域，任何一個第三方庫都會存在大量的變量和函數，爲了避免變量污染（命名衝突），開發者們想到的解決辦法就是使用立即執行函數。

在瞭解立即執行函數之前先明確一下函數聲明、函數表達式及匿名函數的形式

• 函數聲明

function test() {
	console.log('hello world!')
}

• 函數表達式

var test = function() {
	console.log('hello world!')
}

• 匿名函數

function() {
	console.log('hello world!')
}

立即執行函數的兩種常見形式:

• ( function(){…} )()
  一個是一個匿名函數包裹在一個括號運算符中，後面再跟一個小括號
• ( function (){…} () )
  一個匿名函數後面跟一個小括號，然後整個包裹在一個括號運算符中

上面兩種寫法等價,要想立即執行函數能做到立即執行，要注意兩點

• 一是函數體後面要有小括號()
• 二是函數體必須是函數表達式而不能是函數聲明。

看下面代碼

除了使用()運算符之外，！，+，-，=等運算符都能起到立即執行的作用。這些運算符的作用就是將匿名函數或函數聲明轉換爲函數表達式，如下所示，函數體是匿名函數或者函數聲明的形式，使用運算符將其轉換爲函數表達式之後就可達到立即執行效果：

// 輸出'hello world!' 還有undefined,使用()運算符
(function(test) {
  console.log(test)
})('hello world!')

(function fn(test) {
  console.log(test)
})('helle world!')


// 輸出'hello world!' 還有undefined,使用()運算符
(function(test) {
  console.log(test)
}('hello world!'))

(function fn(test) {
  console.log(test)
}('helllo world'))

// 輸出'hello world!' 還有 true,使用!運算符
!function(test) {
  console.log(test)
}('hello world!')

!function fn(test) {
  console.log(test)
}('hello world!')

// 輸出'hello world!'  還有 NaN,使用+運算符
+function(test) {
  console.log(test)
}('hello world!')

+function fn(test) {
  console.log(test)
}('hello world!')

// 輸出'hello world!'  還有 NaN,使用-運算符
-function(test) {
  console.log(test)
}('hello world!')

-function fn(test) {
  console.log(test)
}('hello world!')

// 輸出'hello world!'  還有 undefined,使用-運算符
var fn = function(test) {
  console.log(test)
}('hello world!')

使用立即執行函數的好處

通過定義一個匿名函數，創建了一個新的函數作用域，相當於創建了一個“私有”的命名空間，該命名空間的變量和方法，不會破壞污染全局的命名空間。
此時若是想訪問全局對象，將全局對象以參數形式傳進去即可，如jQuery代碼結構:

(function(window, undefined) {
   // jQuery code
 })(window)

其中window即是全局對象。

作用域隔離非常重要，是一個JS框架必須支持的功能，jQuery被應用在成千上萬的JavaScript程序中，必須確保jQuery創建的變量不能和導入他的程序所使用的變量發生衝突。

---

謝謝你閱讀到了最後
期待你,點贊、評論、交流