闭包的概念

假设函数b在函数a的内部进行定义了那么函数b就是一个闭包。

闭包的作用

1. 在函数外部读取函数内部的局部变量

var name='成雪婷';
function parentFun(){
    var age=24;
    function subFun(){
        var sex='girle';
        console.log(name,age,sex);
    }
    console.log(sex);//报错：sex is not defind
    return subFun;
}
var person=parentFun();
person()

控制台打印输出如下：实现了函数外部访问函数内的局部变量。

成雪婷 24 girle

可总结如下：

• 在函数外部是无法访问函数内部的变量或函数，反之则可以。上面实例中age 变量是父函数的私有变量，一般我们通过普通的途径是无法从函数外部进行访问的，而当我们通过返回parentFun函数的内部子函数subFun的模式间接的将age暴露给函数外部的时候，相当于是对外提供了可访问的接口，类似这种形式的子函数就是一个典型的闭包，可以通过子函数访问父函数的局部变量。

2. 保存变量于内存中，避免全局变量的污染

function result(){
    var count=0;
    function addFun(){
        count++;
        return count;
    }
    return addFun;
}//此处不能用countResult()()
var countResult=result();
console.log(countResult());//1
console.log(countResult());//2
console.log(countResult());//3

上述代码中，count是函数result的一个私有变量，它的值在函数addFun中不断变化，并且每当执行一次该函数的时候就会保存上一次结果的值，在原有的基础上执行后加加操作所以函数result中的count是一直被保存在内存中，函数执行完之后，并没有被释放，从新开始计数。
可以总结如下：

• 闭包在子作用域中保存了一份在父级作用域取得的变量（如代码中的countResult=result()），这些变量不会随着父级函数执行完之后销毁而销毁，因为他们常驻内存了。
• 当需要定义这样的变量，执行某些操作后，始终保存上一次的值，希望这个变量一直保存在内存中，但又不污染全局变量，这个时候，我们就可以使用闭包。

for循环【经典问题】

创建闭包的一个原则就是不要引用循环变量，即闭包外面直接就是循环。
以下就是错误的范例：

var tasks=[];
for(var i=0;i<3;i++){
    var n=i;
    tasks.push(function(){
        console.log(n)
    })
}
console.log('edfor')
for(var j=0;j<task.length;j++){
    task[j]();
}

如果在循环中创建函数，并引用循环变量，原意是打印出012，但结果却是都是3。但是，如果一定要引用循环变量怎么办？方法是再创建一个函数，将循环变量作为函数的参数传入。

var tasks=[];
for(var i=0;i<3;i++){
    var fn=function(n){
        tasks.push(function(){
            console.log(n)
        }
    }
    fn(i);
}

这段代码是正确的，因为循环内部，fn()函数立即被执行，因此，闭包拿到的参数n就是当前循环变量的值的副本。
最后简化语法直接用匿名函数的立即执行模式改写如下：

var tasks=[];
for(var i=0;i<3;i++){
    (function(n){
        tasks.push(function(){
            console.log(n)
        });
    })(i);
}

或者也可以这样写：

var tasks=[];
for(var i=0;i<3;i++){
    var b=function(n){
        tasks.push(function(){
            console.log(n)
        });
    }(i);
}//对于立即执行函数(匿名函数)()和var b=function(){}()一样

另外一种就是：

window.onload=function(){
    var aBtns=document.getElementByTagName("input");
    for(var i=0;i<aBtns.length;i++){
        aBtns[i].onclick=function(){
            console.log(new Date,i)//3 3 3
        }
    }
}

解决方法就是用立即执行函数：

window.onload=function(){
    var aBtns=document.getElementByTagName("input");
    for(var i=0;i<aBtns.length;i++){
       (function(n){ aBtns[i].onclick=function(){
            console.log(new Date,i)
        }})(i)
    }
}

还有一种就是:

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

这个程序执行完是输出10个10，因为浏览器会把setTimeout里面的函数加到任务队列中。等到主线程的任务执行完，并且setTimeout延迟时间到了才会执行回调函数。而同样，因为回调函数也是一个闭包函数，自然也保存着对外面的自有变量i的引用而这时i已经随着for循环（主线程的任务）执行完毕变成了10，所以当回调执行时，理所当然访问到的是10个10.
解决方法依然是立即执行函数。

更多实例

实例1：

function say667(){
    var num=42;
    var say=function(){console.log(num)}
    num++;
    return say;
}
var sayNumber=say667();
sayNumber();//43

实例2：

var n;
function f(){
    var b="b";
    n=function(){
        return b;
    }
}
f()
n()

闭包的使用注意事项

• 由于闭包会使得函数中的变量会被保存在内存中，因常驻内存，如果变量对象不使用会比较占用内存。在ie8以下的浏览器还会造成内存泄露。

内存泄露

就是匿名函数会保存父函数的私有变量对象，也就意味着该元素永驻内存中，无法释放销毁。

function fun(){
    var oBtn=document.getElemenntById('btn');
    oBtn.onclick=function(){
        console.log(oBtn.id)
    }
}
fun();//oBtn保存着oBtn.id永驻内存中。

解决方法就是：通常将oBtn.id保存在一个函数外局部的变量对象中，解除对Dom对象的引用，同时将dom元素设置为null。

function fun(){
    var oBtn=document.getElementById('btn');
    var id=oBtn.id;//将引用对象保存在一个局部变量对象中。
    oBtn.oncick=function(){
        console.log(id)
    }
    oBtn=null;
}

闭包中的this

闭包中的this指向window
如果不想指向this的话可以这样：

var box={
    user:'the box';
    getUser:function(){
        return function(){
            return this.user;
        }
    }
}
alert(box.getUser().call(box));

另一种：

var box={
    user:'the box';
    getUser:function(){
        that=this;
        return function(){
            return that.user;
        }
    }
}

立即执行函数

最常用的两种写法：

(function (){/*code*/}());
(function (){/*code*/})();

为什么第一种执行而不报错呢?因为在js里，括号内部不能包含语句，当解析器对代码进行解析的时候，先碰到了()，然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明。

作用

模拟块作用域
js只有函数作用域，在同时调用多个库的情况下，很容易造成对象或者变量的覆盖。
liba.js

var num=1;

libb.js

var num=2;

如果在页面上同时引用liba,js和liba,js两个库。必然导致num的覆盖，为此：
liba.js

(function(){
  var num=1;
})();
libb,js

(function(){
  var num=2;
})();

经过改造之后，两个库的代码就完全独立，互不影响了。

1. 下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的方法

var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() ); //代码输出10

方法一：

var fnArr=[];
for(var i=0;i<10;i++){
    fnArr[i]=(function(i){
      return function(){
        return i;
}
}
)(i)
}
console.log(fnArr[3]());

方法二：

var fnArr=[];
for(var i=0; i<10;i++){
    (function(i){
      fnArr[i]=function(){
        return i;
}
})(i)
}
console.log(fnArr[3]())

输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    (function(i){
       setTimeout(function(){
          console.log('delayer:' + i)
},0)
})(i)
};