js大法也玩了好几年。但今天读到一篇文章，提到了一个词：**IIFE**，立马傻眼了，这什么鬼…

于是谷歌了一梭…原来就是个自动执行的函数表达式。**Immediately-Invoked Function Expression**

一句话概括就是：定义时就会立即执行的 JavaScript 函数。以下来自mozilla的权威解释

这是一个被称为 自执行匿名函数 的设计模式，主要包含两部分。

第一部分是包围在 圆括号运算符() 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域；
第二部分再一次使用 () 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。

在 Javascript 中，圆括号**()**是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。

话不多说，看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * 1. 当一个函数变成IIFE时，其内部的变量不能从外部访问
 */
(function(){
    var name = 'Jack';
})();

// 外部不能访问变量 name
console.log(name); // undefined

/**
 * 2. 将 IIFE 分配给一个变量，不是存储 IIFE本身，而是存储其执行后返回的结果
 */
var result = (function(){
    var name = 'Jack';
    return name + ' love Rose';
})();

// 此时，IIFE就是一个变量，而不是函数
console.log(result); // Jack love Rose

结论及用途

  • 需要有括号包起来，且两个IIFE连着写时，需要加分号；
  • 省略函数命名，避免污染全局变量；
  • IIFE内部形成单独的作用域，可以封装一些外部无法读取的私有变量；

一个小知识点

1
2
3
4
5
6
7
8
9
10
11
12
// case1
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i)
}
// case2
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000 * i)
}

上面的case1和case2，结果分别是什么？为什么？在看下面：

1
2
3
4
5
6
7
8
// case3
for (var i = 0; i < 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, 1000 * i);
    })(i);
}

case2和case3均打出：0,1,2,3,4。而case1，则：5,5,5,5,5

嗯，神奇现象之：let-for搭配…块作用域的应用