JS: 立即执行函数

在讨论前端的时候，我们总能听到立即执行函数。我第一次听到这个名字的时候总以为很高大上，每次都想以后有机会好好学一下。但其实立即执行函数是个很简单的概念，而且我们可能每天都在用，只是忽略了而已。

概念

立即执行函数 = 立即要去执行的函数 = 定义完了就去执行。简单来说就是：

function fn() {
    console.log("Hello World")
}

fn()

没了。

由来

这很简单呀，好像很常见嘛，Java，C都会出现这样的代码呀。比如 Java 里：

class Man() {
    public int static main(String[] args) {
      fn();
    }

    private void fn() {
      System.out.println("Hello World");
    }
}

或者 C：

void fn() {
    printf("Hello World");
}

int main() {
    fn();
}

反正就是在入口里去调用定义好了的函数嘛。虽然看起来意思差不多，但是意义却不一样。在没有 let 和 const 的时代，JS 是没有块级作用域的，只有函数作用域。如果要声明一个局部变量可能放在函数里，这样外面的变量才不会访问到里面的变量。

function fn() {
    var a = 1
}

console.log(a) // => 报错，a undefined

所以呀，如果要造一个块级作用域只能靠函数来搞了。假如 ES6 的代码是这样：

{
    let a = 1
}

那么以前的写法就是这样的：

function fn() {
    var a = 1
}
fn()

你看这里的 a 就是局部变量了，同时也出现我们所说的立即函数了。

变一下

有人可能会说了，我见的立即函数都不是这样呀，都是奇形怪状的，在 function 之前加各种乱七八糟的符号。

别忘记了，我们上面的立即函数还在全局声明了一个叫 fn 的函数呢，这不得不偿失嘛，所以 JS 程序员就这样想：

function() {
    var a = 1
}()

但是不好意思，语法错误。

所以你可以：

1. 用括号包住上面的整体

(function() {
    var a = 1
}())

2. 在上面整体前加运算符号

!function() {
    var a = 1
}()

+function() {
    var a = 1
}()

-function() {
    var a = 1
}()

~function() {
    var a = 1
}()

反正原则就是搞得不报错，同时不创建新的全局函数变量就行了。个人推荐使用感叹号 ! 的写法，毕竟意思更明确嘛，说明这个很重要~