关于闭包的所有理解

闭包这家伙，从刚开始接触到javascript基础就走进我的脑子里，但是总感觉自己理解的不透彻，不清晰。然而，几乎每个面试官呢，又好像都挺喜欢问这个问题的，所有，没办法罗，只有再深入去探讨一下咯，哈哈。

1.什么是闭包

这里先给闭包下一个定义，简单概括为两点：

1).函数嵌套函数；

2).内层函数可以访问外层函数的变量和参数。

2.js中的垃圾回收机制

看代码说话：

        function aa() {
            a = 10;
        }
        aa();
        console.log(a); // 10  a没有var申明，默认是一个全局变量
        //上面代码等价于：
        var a;
        function aa(){
            a = 10;
        }


        // 对比下面这个例子：
        function aa() {
            var a = 10;
        }
        aa();
        console.log(a);  //js中的垃圾回收机制  a is not defined

3.闭包的两个最大的用处

1).可以读取函数内部的变量

2).让这些变量的值始终保持在内存中(不会被垃圾回收机制所回收)

出于种种原因，我们有时候需要得到函数内的局部变量。但是，正常情况下，这是办不到的（js的垃圾回收机制），只有通过变通方法才能实现。

那就是在函数的内部，再定义一个函数。

        //example1:
        function f1() {
            var n = 999;
            nAdd = function () {
                n += 1
            }; //全局变量
            function f2() {
                alert(n);
            }

            return f2;
        }
         var result = f1();
         result(); // 999
         nAdd();
         result(); // 1000
        //这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，
        // 首先在nAdd前面没有使用var关键字，因此nAdd是一个全局变量，而不是局部变量。

        //example2:
        (function (x) {
            return (function (y) {
                console.log(x);
            })(2)
        })(1);
        // result: 1  输出1，闭包能够访问外部作用域的变量或参数。

4.闭包只能取得包含函数中任何变量的最后一个值

看看下面这个闭包函数：

        function test1() {
            var result = [];
            for (var i = 0; i < 10; i++) {
                result[i] = function () {
                    alert(i);
                };
            }
            return result;
        }

        test1()[1](); // 10

执行任何一个test1()[i](); 结果都会弹出10.

5.我们可以通过创建另一个匿名函数强制让闭包的行为符合预期

    function test2() {
            var result = [];
            for (var i = 0; i < 10; i++) {
                result[i] = function (num) {
                    return function () {
                        alert(num);
                    }
                }(i);
                //也可以这样写
                /*(function(m){
                 result[m] = function(){
                 alert(m);
                 };
                 })(i);*/
            }
            return result;
        }
        for (var i = 0; i < test2().length; i++) {
            test2()[i](); // 0,1,2,3,...,8,9
        }

这里用到了立即执行函数表达式。将 JavaScript 代码包含在一个函数块中有神马意思呢？为什么要这么做？句话说，为什么要用立即执行函数表达式（Immediately-Invoked Function Expression）。IIFE 有两个比较经典的使用场景，一是类似于在循环中定时输出数据项，二是类似于 JQuery/Node 的插件和模块开发。

        for (var i = 0; i < 5; i++) {
            setTimeout(function () {
                console.log(i);
            }, 1000);
        }
        /*上面的输出并不是你以为的0，1，2，3，4，而输出的全部是5，这时 IIFE 就能有用了：*/
        for (var i = 0; i < 5; i++) {
            (function (m) {
                setTimeout(function () {
                    console.log(m);
                }, 1000);
            })(i);
        }
        /* 输出 0，1，2，3，4 */
        
        /*而在 JQuery/Node 的插件和模块开发中，为避免变量污染，也是一个大大的 IIFE：*/
        (function($){
         //代码
         })(jQuery);

6.闭包中关于this对象

        //example1:
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {
                return function () {
                    return this.name;
                };
            }
        };
        console.log(object.getNameFunc()()); // The Window 【匿名函数的执行环境具有全局性,this指向window】

        //example2: 改进
        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {
                var that = this;
                return function () {
                    return that.name;
                };
            }
        };
        console.log(object.getNameFunc()()); // My Object

        //example3: 
        var myObject = {
            foo: "bar",
            func: function () {
                var self = this;
                console.log("outer func:  this.foo = " + this.foo);
                console.log("outer func:  self.foo = " + self.foo);
                (function () {
                    console.log("inner func:  this.foo = " + this.foo);
                    console.log("inner func:  self.foo = " + self.foo);
                }());

               //用闭包来解决
                /*(function (test) {
                    console.log("inner func:  this.foo = " + test.foo);  //'bar'
                    console.log("inner func:  self.foo = " + self.foo);
                })(self);*/
            }
        };
        myObject.func();
        /*
         * 输出结果：
         outer func:  this.foo = bar
         outer func:  self.foo = bar
         inner func:  this.foo = undefined
         inner func:  self.foo = bar
         * */