JavaScript——(function(){})()立即执行函数解析

 

要理解立即执行函数(function(){})()，先了解些函数的基本概念（函数声明、函数表达式、匿名函数）。

函数声明：使用function声明函数，并指定函数名。　

function setFn() {
    // coding   
}

函数表达式：使用function声明函数，但未指定函数名，将匿名函数赋予一个变量。

var setFn = function() {
    // coding
}

匿名函数：使用function关键字声明函数，但未指定函数名。匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。

function() {
    // coding
}

函数声明与函数表达式的不同在于：

1. 函数声明可在当前作用域下提前调用执行，函数表达式需等执行到该函数后，方可执行，不可提前调用。

setFn()
function setFn() {
    // coding  
}
// 正常，函数声明可提前调用

setFn()
var setFn = function() {
    // coding
} 
// 报错，setFn未保存对函数的引用，函数调用需放在函数表达式后面

 

2. 函数表达式可直接在函数后加括号调用。

var setFn = function() {
    console.log(2)
}()

// 2   解析至此，可直接执行调用

立即执行函数(function(){})()可以看出很像函数表达式的调用，但为什么要加括号呢？如果不加括号：

function(){
    console.log(1)
}()

// 报错，函数需要函数名

解析： 虽然匿名函数属于函数表达式，但未进行赋值，所以javascript解析时将开头的function当做函数声明，故报错提示需要函数名

 

立即执行函数里面的函数必须是函数表达式，所以由var setFn = function() {}()可以理解为在匿名函数前加了 = 运算符后，将函数声明转化为函数表达式，所以拿！，+，-，（）...等运算符来测试下是否如此。

!function(){
    console.log(1)
}()
// 1
    
+function(){
    console.log(2)
}()
// 2
    
-function(){
    console.log(3)
}()
// 3
    
(function(){
    console.log(4)
})()
// 4

 

由此可见，加运算符确实可将函数声明转化为函数表达式，而之所以使用括号，是因为括号相对其他运算符会更安全，可以减少不必要的麻烦。

立即执行函数与正常函数传参形式是一致的。

(function(a, b){
    console.log(a + b);
})(1, 2)
// 3

(function(){}())这样写的好处是在内部定义的变量不会跟外部的变量有冲突，达到保护内部变量的作用。jquery等好多库里面就好多使用的这种方式，然后再return一个变量，详情可以查看另一篇博文https://blog.csdn.net/xcymorningsun/article/details/85234232

————————————————————————————————————————————————————

关于保护内部变量闭包问题，这个可以看下面的例子

 

循环中的闭包

一个常见的错误出现在循环中使用闭包，假设我们需要在每次循环中调用循环序号

    
for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的代码不会输出数字 0 到 9，而是会输出数字 10 十次。

当 console.log 被调用的时候， 匿名函数保持对外部变量 i 的引用，此时 for循环已经结束， i 的值被修改成了 10.

为了得到想要的结果，需要在每次循环中创建变量 i 的 拷贝。

避免引用错误

为了正确的获得循环序号，最好使用 匿名包裹器（ 译者注：其实就是我们通常说的自执行匿名函数）。

    
for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。

当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是 不会被循环改变的。

有另一个方法完成同样的工作；那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。

    
for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}