闭包的概念
假设函数b在函数a的内部进行定义了那么函数b就是一个闭包。
闭包的作用
- 在函数外部读取函数内部的局部变量
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暴露给函数外部的时候，相当于是对外提供了可访问的接口，类似这种形式的子函数就是一个典型的闭包，可以通过子函数访问父函数的局部变量。
- 保存变量于内存中，避免全局变量的污染
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;
})();
经过改造之后，两个库的代码就完全独立，互不影响了。
- 下面的代码输出多少？修改代码让 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)
};
网友评论