jacascript 立即执行函数(IIFE)与闭包

前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！

 　　大牛的讲解，点击

立即执行函数(IIFE)

立即执行函数、立即执行表达式、IIFE（immediately invoked function expression）、自执行函数，叫法不同，都是一样的；

我们首先需要有函数表达式的概念，点击

定义一个函数，函数后面加上括号，即可完成调用；

<script type="text/javascript">
    function (){}();   // SyntaxError: Unexpected token (
    //引擎在遇到关键字function时，会默认将其当做是一个函数声明，函数声明必须有一个函数名，所以在执行到第一个左括号时就报语法错误了；
    //函数表达式的函数名则可有可无；
    //在function前面加！、+、 -、=甚至是逗号等或者把函数用（）包起来都可以将函数声明转换成函数表达式；我们一般用（）把函数声明包起来或者用 = 
</script>

引擎在遇到关键字function时，会默认将其当做是一个函数声明，函数声明必须有一个函数名，所以在执行到第一个左括号时就报语法错误了；

然后我们给它加上函数名；

<script type="text/javascript">
    function abc(){}();   // SyntaxError: Unexpected token )
    //在一个表达式后面加上括号，表示该表达式立即执行；
    //而如果是在一个语句后面加上括号，该括号完全和之前的语句没什么关系，而只是一个分组操作符，用来控制运算中的优先级（小括号里的先运算）。
</script>

在一个语句后面加上括号，该括号完全和之前的语句没什么关系，而只是一个分组操作符，用来控制运算中的优先级（小括号里的先运算）。上面代码可以写成：

<script type="text/javascript">
    function abc(){};   
    ();// SyntaxError: Unexpected token )
    //分组操作符内的表达式不能为空，执行到右括号时，发现表达式为空，所以报错。
</script>

分组操作符内的表达式不能为空，执行到右括号时，发现表达式为空，所以报错。

然而函数表达式的函数名则可有可无；

在function前面加！、+、 -、=甚至是逗号等或者把函数用（）包起来都可以将函数声明转换成函数表达式；我们一般用（）把函数声明包起来或者用 = ；

我们在函数后面加上括号，然后再用另一个括号把它们都包起来；

javascript中，括号内不允许包含语句，但可以是表达式；

引擎先遇到括号，然后遇到关键字function , 就自动把括号里面的代码识别为函数表达式，而不是函数声明；

<script type="text/javascript">
    (function (){/*code*/}());
    //javascript中，括号内不允许包含语句，但可以是表达式；
    //引擎先遇到括号，然后遇到关键字function , 就自动把括号里面的代码识别为函数表达式，而不是函数声明 
    (function(){/*code*/})(); //也可以这样写
    
    var a = function(){/*code*/}();
    //我们可以在函数表达式后面直接加括号，而不用把函数包起来；
    
    //但还是推荐外部加上()：
    var b = (function(){/*code*/}());
    var c = (function(){/*code*/})();
    //因为外部如果没有()，我们得去function(){/*code*/}后面看是否存在()，判断b/c是一个函数还是一个函数内部的返回值
    //为了代码的可读性，还是要在外部加上()，无论是否已经是表达式；
</script>

javascript只有函数拥有局部作用域，立即执行函数也有这一特点，我们可以利用它减少全局变量造成的空间污染；

<script type="text/javascript">
    (function abc(){
        console.log(abc);//function abc(){...}  
        var a = 1;
        console.log(a);//1
    })()
//    console.log(a); //ReferenceError: a is not defined
    console.log(abc);//ReferenceError: abc is not defined
    //立即执行函数的函数名在外部也是找不到的
    //函数表达式的标识符在外部作用域是找不到的，只有内部作用域可以找到
</script>

 闭包(closure)

大牛的讲解，点击

我们首先需要有作用域的概念，点击

由于作用域的关系，我们在函数外部是无法直接访问到函数内部的变量的，但是函数内部可以把这个变量传给全局变量或者返回出来，这样外部作用域就可以访问函数内部作用域的变量了；

简单的说，闭包就是有权限访问另一个函数内部作用域的变量的函数；

1. javascript具有自动垃圾回收机制，函数运行完之后，其内部的变量和数据会被销毁；
2. 但是闭包就是在外部可以访问此函数内部作用域的变量，所以闭包的一个特点就是只要存在引用函数内部变量的可能，JavaScript就需要在内存中保留这些变量。而且JavaScript运行时需要跟踪这个内部变量的所有外部引用，直到最后一个引用被解除（主动把外部引用赋为null或者页面关闭），JavaScript的垃圾收集器才能释放相应的内存空间；这句话不是很好理解，下面用代码展示；

<script type="text/javascript">
    function outer(){
        var a = 1;
        function inner(){
            return a++;
        }
        return inner;
    }
    var abc = outer();
    //outer()只要执行过，就有了引用函数内部变量的可能，然后就会被保存在内存中；
    //outer()如果没有执行过，由于作用域的关系，看不到内部作用域，更不会被保存在内存中了；
    
    console.log(abc());//1
    console.log(abc());//2
    //因为a已经在内存中了，所以再次执行abc()的时候，是在第一次的基础上累加的
    
    var def = outer(); 
    console.log(def());//1
    console.log(def());//2
    //再次把outer()函数赋给一个新的变量def，相当于绑定了一个新的outer实例；
    
    //console.log(a);//ReferenceError: a is not defined
    //console.log(inner);//ReferenceError: a is not defined
    //由于作用域的关系我们在外部还是无法直接访问内部作用域的变量名和函数名
    
    abc = null;
    //由于闭包占用内存空间，所以要谨慎使用闭包。尽量在使用完闭包后，及时解除引用，释放内存；
</script>

立即执行函数能配合闭包保存状态。

<script type="text/javascript">
    for(var i = 0; i < 3; i++){
          setTimeout(function(){
              console.log(i);    //3 3 3
              //在执行到这一行时，发现匿名函数里没有i，然后向往外部作用域找，然后找到的其实是for循环执行完了的i，也就是2++，3
          },0);  
    };     
    
    
    for(var i = 0; i < 3; i++){
          setTimeout((function(x){
              console.log(x);    //0 1 2
          })(i),0);  
          //在立即执行函数内部i传给了x，并且锁在内存中，所以不会变
    }; 
</script>

一道经典面试题：

下面的ul中，如何点击每一个 li 的时候弹出其下标?

<ul>
    <li>index  00000</li>
    <li>index  11111</li>
    <li>index  22222</li>
</ul>

方法一：用闭包

<script type="text/javascript">
    window.onload = function(){
        var oLi = document.getElementsByTagName('ul')[0].children;
        for (var i = 0; i < oLi.length; i++){
            (function(index){
                oLi[index].onclick = function(){
                    console.log(index);
                };
            })(i);
        }        
    }
</script>

方法二：闭包还有一种写法

<script type="text/javascript">
    window.onload = function(){
        var oLi = document.getElementsByTagName('ul')[0].children;
        for (var i = 0; i < oLi.length; i++){
            oLi[i].onclick = (function(index){
                return function(){
                    console.log(index);
                }
            })(i);
        }        
    }
</script>

方法三：将下标作为对象的一个属性，添加到每个数组元素中，（name: " i ", value: i 的值）;

<script type="text/javascript">
    window.onload = function(){
        var oLi = document.getElementsByTagName('ul')[0].children;
        for (var i = 0; i < oLi.length; i++){
            oLi[i].i = i;
            oLi[i].onclick = function(){
                console.log(this.i);
            };
        }        
    }
</script>

还有其他方法...以后在整理；