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}()

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