闭包的概念
假设函数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)
};
网友评论