JS核心-(34)-函式以及This的運作-立即函式

前言

介紹什麼是立即函式(IIFE)

立即函式的寫法

前面文章講到函式陳述式必須要具名，才能夠被調用。函式表達式，無論具不具名，也必須要有變數乘裝才能夠透過

變數名稱 + () 進行調用、呼叫。那麼立即函式呢?

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

而寫法則有兩種：

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

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

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

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

---

立即函式的特點

• 立刻執行
• 無法在函式外再次被執行

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

console.log(IIFE); //Uncaught ReferenceError: IIFE is not defined

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

---

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

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

console.log(Ming); // not define

在立即函式內宣告的變數 Ming ，也就是區域變數是無法在外部做呼叫的，這個觀念也符合函式的觀念。但是有時候我們也想要

像一般函式一樣，傳參數進入到立即函式的環境中，該怎麼傳呢?

---

傳參數到立即函式中

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

以上面的範例來說，利用最後面的小括號帶入想要傳入的參數類型 arg ，並且在立即函式的 function ( ) 小括號設定接受的

變數名稱 parameter ，就可以接收到傳進立即函式的變數了

---

立即函式回傳值

同樣的，立即函式也可以 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);

2. 全域屬性

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

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

當我們將 window 傳進去的時候，就代表我們對 window 新增的屬性 person 可以在別的 IIFE 中被調用，

因此第二個 IIFE 不需要傳入任何參數就可以取用到 window 的 person 屬性。

這兩種方式都是透過全域的變數、或是屬性來完成資料的傳遞。這種方法也多半都用於大型的框架、像是 Vue、React 等。