自执行函数

1. 什么是自执行函数？

我们平时所说的自执行函数，也称立即调用函数。

(function () {
    statements
})()

就像它的名字一样，这种结构具有“自执行”或者说“定义后立即调用”的功能。也有如下写法：

(function () {
    statements
}())

首先，这种结构是一种特殊的函数表达式，因此称之为 立即调用函数表达式（Immediately Invoked Function Expression, IIFE） 更为合理。

其次，这种特殊的函数表达式的结构，源于一种设计模式，叫自执行匿名函数（Self-Executing Anonymous Function）。

所以我们平时叫他 “自执行(匿名)函数” 也好，“立即调用函数（表达式）” 也好，都是没问题的。但是日常使用过程不要忽视我们省略的两个部分，第一这是个匿名函数，第二这是一种表达式。

2. 结构和功能

通过上述示例代码，我们可以看到IIFE的结构分两部分：

第一部分是一个匿名函数。根据js的作用域原理，该匿名函数在一个独立的函数作用域中。这样既可以避免外界访问内部变量，又不会污染全局作用域。这种隔离特性，是IIFE的一个重要功能。ES6之前的JS是没有块级作用域的，只有全局作用域和函数作用域。借助匿名函数实现隔离是当时最好的办法。

第二部分使用 () 创建了一个立即执行函数表达式，JS引擎在运行到此处时会立即执行该函数。这便是IIFE的第二个功能——立即执行。我们平时创建函数，目的是为了模块化和功能复用；此外在形式上，大多数编程语言都会有函数声明、函数定义和函数调用三个部分。而IIFE的目的不是对函数做功能复用，而是隔离内外+立即执行，也就是说这个函数只会执行一次，之后就不用了，所以也没有声明的必要。

那么为什么要采用这种匿名函数+圆括号的结构呢？

这里简单提一下关于JS函数的功能复用。对于普通函数，我们可以通过函数名来实现一处定义，多处调用。而对于匿名函数匿名”，就要借助引用的手段。

// 普通函数通过函数名调用
function fn1 () {
  statements
}

fn1()

// 匿名函数通过引用调用
var fn2 = function () {
  statements
}

fn2() // 这里的fn2就是对匿名函数的引用

3. 如何使用

由于IIEF的两种书写形式已经在第一部分提到，这里不再重复。我们主要是从应用场景角度来详细说明。

3.1. 惰性返回

将 IIFE 分配给一个变量，不是存储 IIFE 本身，而是存储 IIFE 执行后返回的结果。

IIFE是惰性载入的，因为函数被执行引擎以同步的方式立即执行了，所以之后的代码访问这个变量时，可以直接返回计算后的结果。

// 使用匿名函数
var result = function () {
  var name = "Foo"
  return name
}
// 每次获取name, 匿名函数内部代码都将被执行一次
result() // "Foo"

// 使用IIEF
var result = (function () {
    var name = "Foo"
    return name
})();
// IIFE 执行后返回的结果，后续访问不需执行，类似“惰性”效果
result // "Foo"

3.2. 模块化

以JQuery和Vue为例，

首先，可以借助IIEF隔离作用域。避免污染，常用于广告、第三方统计等需求。

<!--示例: 百度统计-->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?12345678223456783234567842345678";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

其次，JS里没有入口函数的概念，在现今的模块化方案成熟稳定之前，立即执行函数也常常用来充当主函数的角色。

// Vue.js v2.6.14 源码结构
(function (global, factory) {...}(this, function () {...}))

// jquery 3.6.0 源码结构
( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {...} else {...}

// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {...} );