JavaScript Day 29. 立即函式 IIFE

立即函式，也称 Immediately Invoked Function Expression，简称 IIFE，是一个在宣告的当下就会马上被执行的函式。

立即函式写法

function IIFE() {}

这边我们有一个函式，假如我们不想要透过呼叫就让它立刻执行，可以有两个作法：

• 这个函式最外面加上一个小括号。
• 在函式的大括号後面加上一个小括号。

可以这麽编写

(function IIFE() {
  console.log("立即函式");
})();

或者是

(function IIFE() {
  console.log("立即函式");
})();

以上得到的结果是一样的。

另外，立即函式无法在函式外被再次执行：

(function IIFE() {
  console.log("立即函式");
})();

console.log(IIFE); //跳错

限制变数作用域

假如今天我们在一个多人团队里，某个人在文件中创建一个函式，另一个人在文件中不小心取了同名的函式，这时两个文件都包含在同一个网页中，由於函数名称相同，於是造成全域受到污染，IIFE 就可以避免这个问题。

function greet() {
    console.log('Hello'); 
}

function greet() {
    console.log('Hey'); 
}

greet() // Hey

可以看到现在有两个同名的函式，目前的状态来说第一个会被第二个覆盖，那麽如果我们不希望它被覆盖呢？接下来的范例会以 IIFE 的概念来编写：

function greet() {
    console.log('Hello'); 
}

(function greet() {
    console.log('Hey'); 
})(); // "Hey"

greet() // Hello

这个范例的意思是，我们把第二个函式放在括号中，使这个函式成为 IIFE，现在他有自己的作用域，因此不会污染到其他区域，' Hello ' 也就不会被覆盖。

立即函式可以用来减少全域变数的使用，因为在 IIFE 中的变数是区域变数，所以很常被使用来包装只会被执行一次或是初始化的程序码。

跟一般的函式一样，IIFE 也可以传参数进去：

(function (w, d, $) {

   // w 是一个局部变数，指向 window 物件
   // d 是一个局部变数，指向 document 物件
   // $ 是一个局部变数，指向 jQuery 物件
   
}(window, document, jQuery));

我们将全域变数 window, document, jQuery 当成参数传递进去并立即执行函式，除了可以在函式中使用不同的变数名称，还能使程序效能稍微提升，因为 JavaScript 找变数的时候，会先找区域变数，区域变数找不到才会往全域变数寻找。

IIFE 也可以有返回值：

// 将立即执行函数的返回值，指定给 foo 变数
var foo = (function () {

    // 回传 object
    return {
        hello: function () {
            return 'Hello';
        }
    };
}());

alert(foo.hello()); // Hello

参考资料：

JS 核心观念笔记 - 立即函式 IIFE
JavaScript 立即执行函数 IIFE (Immediately Invoked Function Expression) / Self-invoking Function