這個章節要來討論立即函式(IIFE)

根據上個章節我們講到，函式陳述式必須要具名，才能夠被調用。

函式表達式，無論具不具名，也必須要有變數乘裝才能夠透過 變數名稱 + () 進行調用、呼叫。

function FnA () {
    console.log('something');
}

FnA();

那麼立即函式呢?

立即函式無論具不具名都沒差，他在被瀏覽器閱讀的當下，就會立刻執行 {} 內的程式碼片段。

而寫法則有兩種

(function () {
    console.log('第一種，小括號在函式結尾的後面');
}());

(function() {
    console.log('第二種，小括號在外面');
})();

只要位於立即函式的 {} 中間的程式碼片段都會立即執行。

並且要記得，立即函式的最後一定要加 ;，不然 ASI 會誤以為是一行而報錯，中斷 javascript 的直譯過程。

立即函式(IIFE)的重點

1. 立刻執行
2. 無法在函式外再次被執行

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

console.log(IIFE);

因為 console.log(IIFE); 在立即函式外執行所以報錯。

這也是立即函式的一個特點喔~!!!

透過立即函式來限制變數的作用域

(function () {
    var Ming = '小明';
    console.log(Ming); // 小明
})();

console.log(Ming); // not define

所以可以看到，在立即函式內宣告的變數，也就是區域變數是無法在外部做呼叫的，這個觀念也符合函式的觀念。

但是有時候我們也想要像一般函式一樣，傳參數進入到立即函式的環境中，該怎麼傳呢?

傳參數到立即函式中

var arg = '我是參數';
(function (parameter) {
    var Ming = '小明';
    console.log(Ming + parameter); // 小明我是參數
})(arg);

利用最後面的小括號帶入想要傳入的參數類型，並且在 立即函式的 function () 小括號設定接受的變數名稱，就可以接收到傳進立即函式的變數瞜。

立即函式回傳值

同樣的，立即函式也可以 return 一個回傳值喔!

var whereMing = (function (where) {
    console.log('where', where);
    return where;
})('小明在西門');

console.log(whereMing); // 小明在西門

立即函式之間的共同變數溝通

主要有兩種方法

方法1: 全域變數

var a = {};
(function (b) {
    b.person = '小明';
})(a);

(function (c) {
    console.log(c.person); // 小明
})(a);

方法1: 全域屬性

(function (global) {
    global.person = '小明';
})(window);

(function () {
    console.log(person); // 小明
})();

當我們將 window 傳進去的時候，就代表我們對window 新增的屬性 person 可以在別的 IIFE 中被調用，因此第二個 IIFE 不需要傳入任何參數就可以取用到 window 的 person 屬性。

這兩種方式都是透過全域的變數、或是屬性來完成資料的傳遞。

這種方法也多半都用於大型的框架、像是 Vue、React 等。

以上就是關於立即函式的介紹，如果沒有問題就可以繼續往下一篇文章前進嚕。

希望對大家有幫助~汪汪!