闭包:Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure ‘remembers’ the environment in which it was created.
1:变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域:全局变量和局部变量。
例如:
var n=999;
function f1(){
alert(n);
}
f1(); // 999
在这个例子中,n是全局变量,在f1()进行访问时获取的值就是全局的999.
但是,对于函数内部声明的局部变量,在函数外部无法访问,这个和其他语言类似:
function f1(){
var n=999;
}
alert(n); // error
2:改进
既然在函数内部声明的变量在外部无法获取,那么如何变通一下才能获取到呢?
首先,在函数内部在定义一个函数:
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
此时,我们会发现,f2可以访问到f1中声明的n值,主要是根据链式作用域,当在当前函数中,找不到变量时,会向上寻找直至undefined.
既然f2()可以获取f1()的内部变量,那么我们就把f2()返回回来,通过f2来获取变量
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
这样,我们就获取到了f1的内部变量。
3:闭包来了
上面提到的f2函数,就是闭包。闭包的定义千姿百态,总结一下就是可以读取其他函数内部变量的函数
获取内部变量:闭包首先就像前面说道的可以获取函数的局部变量
存储变量:在一般的函数中,当函数执行完成之后,函数内部的变量随之也就被销毁了,但是闭包可以把涉及到的变量存储下来,例如:
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
由于f2是一个闭包,他保存了n的值,所以在调用了加一函数之后,n的值变成了1000,保证了n没有被销毁。
4:注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
放几个例子:
function makeFunc() {
var name = "Mozilla";
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
此时返回的依旧是Mozilla
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12
下面这个是看到典型的闭包问题:
function fun(n,o) {
console.log(o)
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?
//问:三行a,b,c的输出分别是什么?
涉及到函数的声明方式问题以及闭包和函数作用链域的问题,详情看:大部分人都会做错的经典JS闭包面试题
答案:
//答案:
//a: undefined,0,0,0
//b: undefined,0,1,2
//c: undefined,0,1,1