Day03【JS】立即呼叫函式 IIFE

IIFE 全称为
Immediately Invoked Function Expression
中文翻译成立即呼叫函式或即刻调用函式运算式

立即执行函式的长相：
(function foo(){...})();

第一眼看到这段程序码时，
或许会觉得难以理解，
但先看看一般函式调用方式：

// 定义函式
function sayHi(){
console.log('Hi')
}

// 呼叫函式
sayHi();

上面呼叫的部分，
用以下写法其实是一样的

(sayHi)()

这样一来，以下的 function 就不难理解了

(function foo(){ 
	var a = 3;
	console.log( a ); // 3
})(); 

可以看到上面的架构和前面的 (sayHi)() 其实是一样的，
只是它在被定义时同时就被执行，
这就是所谓的立即执行函式（Immediately Invoked Function Expression）。

要细分的话，
IIFE 另外又分成具名立即执行函式
与匿名立即执行函式，
差别仅是有没有指定名称：

// 具名
(function foo(){ 
	var a = 3;
	console.log( a ); // 3
})();

// 匿名
(function (){ 
	var a = 2;
	console.log( a ); // 2
})();

不论有没有指定名称，
IIFE 都会在当下立刻调用执行。

比较要注意的是，
如上的 foo 虽然有被宣告，
但包在被执行的 () 号中，
所以在执行完会马上释放掉记忆体，
之後要再呼叫 foo() 的话，
会报 foo is not defined 的错误。

以上总结出 IIFE 两个特性：

• 立刻执行
• 无法在函式外被再次执行

因为 IIFE 会立即调用，
因此在赋值时，变数接收到的是执行完毕回传的值。

var x = (function IIFE(){
	return 42;
})();

x;	// 42

IIFE 的其他功能

指定范畴：将传入的参数当作作用域

var a = 2;

(function IIFE(global) {
  var a = 3;
  console.log(a); // 3
  console.log(global.a); // 2
})(window);

console.log(a); // 2

确保 undefined 的正确性

undefined = true;

(function IIFE(undefined) {
  var a;
  if (a === undefined) {
    console.log('Undefined 在这里很安全！');
  }
})();

反转顺序 UMD（Universal Module Definition）

var a = 2;

(function IIFE(def) {
  def(window);
})(function def(global) {
  var a = 3;
  console.log(a); // 3
  console.log(global.a); // 2
});

参考资料

• 【你不懂JS：入门与进阶】第二章：进入JavaScript