继上一篇文章聊到 Webpack 打包后的代码分析，我对立即执行函数做了一点小研究，发现了一些有趣的小知识点，想用文字的形式记录下来一些学习心得。

IIFE

看到 IIFE 大家都会想到立即执行函数的缩写，它的全称是 Immediately Invoked Function Expression，注意这个 Expression ，它的意思是“表达式”。

我们知道函数有两种形式：

  • 声明式

    1. function xixi() {
    2.   console.log('声明式')
    3. }

  • 表达式

    1. var haha = function () {
    2.   console.log('表达式')
    3. }

    那么我们想要执行某个函数，就需要在 函数名 后面加上执行符号()，也就是下面所示：

    1. xixi()
    2. haha()

    对于 函数 而言，这个执行符号 () 只能是跟在 表达式 后面，不信我们执行下面代码：

    1. function xixi() {
    2.   console.log('声明式')
    3. }()

image.png

  1. var haha = function () {
  2.     console.log('表达式')
  3. }()

image.png

什么事表达式

知识点来了，JS 中表达式的定义是什么？
我理解的“表达式”：程序执行到一个“表达式”时，会返回一个值到这个“表达式”所在的位置。

  1. 1
  2. 'hello'
  3. (1)
  4. +1
  5. 1 + 1
  6. !1
  7. ~1
  9. var a = 1 + 1
  11. [1,2,3,4,5]
  13. var haha = function () {
  14.     console.log('表达式')
  15. }

上述代码，都属于 表达式，所以我们将上述 声明式 的函数改造一下，它就变成 表达式 了：

  1. (function xixi() {
  2.     console.log('声明式')
  3. })()

上述形式就变成了，一个 表达式 和一个执行符号 ()，这样就变成了一个 立即执行函数表达式。
我们反过来理解，只有是 函数表达式，才能被 立即执行。

角度刁钻

独立作用域

立即执行函数是有独立的作用域的，代码如下：

  1. (function xixi() {
  2.     console.log('声明式')
  3. })()
  5. console.log(xixi)

image.png

全局环境是无法拿到立即执行函数内部的变量，包括函数本身。

有了独立作用域，这就是早期没有 ES6 模块化加持，我们劳动人民常常用 立即执行函数 来模拟模块化开发。

首先，独立作用域 在执行完之后就会被销毁；其次，我们可以在作用域内通过在 window 上挂载属性和方法的形式完成向外抛出模块内部的信息。