Luna's Blog

什麼是 IIFE?

是一個定義完馬上就執行的 JavaScript function

有什麼功能

不需要呼叫此函式，也能在函式建立後立即執行。
可以減少「全域變數」的產生，同時也避免了變數名稱衝突的機會

一般函示需要呼叫才會執行

function getNumber() {
  var value = 2;
  return value;
}
console.log(getNumber()); // 2

IIFE 只要在 function 外加上()，並在 function 後加上()就可以不需呼叫，就可以執行

(function () {
  var value = 2;
  console.log(value); // 2
})();

用箭頭函示更簡化

(() => {
  var value = 2;
  console.log(value); // 2
})();

(function () {
  var value = 2;
  console.log(value); // 2
})();
//數字2只能在在裡面印出，外層無法取得

除非：
console.log(
  (function () {
    var value = 2;
    return value;
  })()
); // 2

或者是：
let number = (function () {
  var value = 2;
  return value;
})();
console.log(number); // 2
//用number變數去接值

以 setTimeout()來說明

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 3,3,3
  }, i * 1000);
}

for 迴圈已跑完，setTimeout 才開始要執行，當執行要抓 i 時 i 已變成 3

for (var i = 0; i < 3; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i); //0,1,2
    }, 1000 * i);
  })(i);
}

用 IIFE 就可以把 i 當參數傳入並一起跑到 web apis 排隊印出。

但 ES6 以後有了 let、const 變數的加入只要把變數改為 let 就算不使用 IIFE 也會有同樣的效果，造成這樣的原因則是閉包。閉包說明

for (let i = 0; i < 3; i++) {
  //Closure 閉包
  setTimeout(() => {
    console.log(i); //0,1,2
  }, i * 1000);
}

JavaScript-立即呼叫(IIFE)

什麼是 IIFE?

有什麼功能

以 setTimeout()來說明