本文写于 2019 年 12 月 7 日

    其实 ES6 之后有了之后，很多之前的用法都没必要了，立即执行函数就是其一。

    今天看到一道面试题：

    请「用自己的语言」简述

    1. 立即执行函数是什么
    2. 立即执行函数有什么用途

    我愣了一下，突然发现自己不是很能清晰的解答这个概念。

    我只知道()代表了两种作用：

    • 包裹
    • 执行函数

    立即执行函数该怎么描述呢？

    声明一个匿名函数，然后马上调用这个匿名函数，就是立即执行函数？

    的确，这就是一个典型的立即执行函数。

    首先声明一个匿名函数： function(){ alert(‘我是匿名函数’) }

    然后在匿名函数后面接一对括号 ()，调用这个匿名函数。

    那么为什么还要用另一对括号把匿名函数包起来呢？

    其实是为了兼容 JS 的语法。

    如果我们不加另一对括号，直接写成：

    1. function(){
    2.   alert('我是匿名函数')
    3. }()

    浏览器会报语法错误！

    想要通过浏览器的语法检查，必须加点小东西，比如下面几种

    1. ;(function () {
    2.     alert('我是匿名函数')
    3. })()(
    4.     // 用括号把整个表达式包起来
    5.     function () {
    6.         alert('我是匿名函数')
    7.     }
    8. )() //用括号把函数包起来
    9. !(function () {
    10.     alert('我是匿名函数')
    11. })() + // 求反，我们不在意值是多少，只想通过语法检查。
    12.     (function () {
    13.         alert('我是匿名函数')
    14.     })() -
    15.     (function () {
    16.         alert('我是匿名函数')
    17.     })()
    18. ~(function () {
    19.     alert('我是匿名函数')
    20. })()
    21. void (function () {
    22.     alert('我是匿名函数')
    23. })()
    24. new (function () {
    25.     alert('我是匿名函数')
    26. })()

    目前我也不是很清楚为什么，但是这些都是实验证明不会报错的写法。（所以大家都说 JS 诡异）

    立即执行函数有什么用呢？

    只有一个作用：创建一个独立的作用域。

    这个作用域里面的变量，外面访问不到（即避免「变量污染」）。

    1. var liList = ul.getElementsByTagName('li')
    2. for (var i = 0; i < 6; i++) {
    3.     liList[i].onclick = function () {
    4.         alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
    5.     }
    6. }

    为什么 alert 的总是 6 呢，因为 i 是贯穿整个作用域的，而不是给每个 li 分配了一个 i！

    怎么解决这个问题呢？

    用立即执行函数给每个 li 创造一个独立作用域即可：

    1. var liList = ul.getElementsByTagName('li')
    2. for (var i = 0; i < 6; i++) {
    3.     !(function (ii) {
    4.         liList[ii].onclick = function () {
    5.             alert(ii) // 0、1、2、3、4、5
    6.         }
    7.     })(i)
    8. }

    在立即执行函数执行的时候，i 的值被赋值给 ii，此后 ii 的值一直不变。

    i 的值从 0 变化到 5，对应 6 个立即执行函数，这 6 个立即执行函数里面的 ii 「分别」是 0、1、2、3、4、5。

    但是这是用var声明，如果使用了let，不会出现这种问题！！！！！！

    这就是立即执行函数的基本概念。

    （完）