简介
一个定义在函数内部的函数与包含它的外部函数构成了闭包,内部函数可以访问外部函数的变量,这些变量将一直保存在内存中,直到无法再引用这个内部函数。
例如:
var a = 0; function outerFun(i) { var b = i; function innerFun(j) { var c = j; console.log("全局变量:"+a); console.log("外部变量:"+b); console.log("内部变量:"+c); a++; b++; c++; } return innerFun; } var testFun1 = outerFun(10); testFun1(10);//全局变量:0 外部变量:10 内部变量:10 testFun1(10);//全局变量:1 外部变量:11 内部变量:10 var testFun2 = outerFun(20); testFun2(20);//全局变量:2 外部变量:20 内部变量:20 testFun2(20);//全局变量:3 外部变量:21 内部变量:20
结论:
c 是 innerFun() 的局部变量,每次执行 innerFun() 都会重新赋值;
b 是 innerFun() 的上一级变量,每次执行 innerFun() 的结果会保存在内存中,是 outerFun() 的局部变量,每次执行 outerFun() 都会重新赋值;
a 是 innerFun() 的上上一级变量,每次执行 innerFun() 的结果会保存在内存中,是 outerFun() 的上一级变量,每次执行 outerFun() 的结果也会保存在内存中;
在JavaScript中,作用域只有全局作用域和函数级作用域两种,在下一级作用域中可以访问和修改上一级作用域的变量,在定义函数时,JS会自动维护一个作用域链,当前的局部作用域位于作用域链顶端,并可以依次向上回溯。闭包的实质就是延长了作用域链。
变量的生存周期
上面提到,js 中只有全局变量和函数级的局部变量两种,全局变量的生存周期当然是永久的,除非我们主动销毁这个全局变量。而对于在函数内用 var 关键字声明的局部变量来说,当退出函数时,这些局部变量即失去了它们的价值,它们都会随着函数调用的结束而被销毁。
例如:
//页面有5个 div,期望点击每个 div 输出它的序号 for(var i=0; i<5; i++) { $('div').eq(i).on('click',function() { console.log(i); }) }
然而,实际上,点击每个 div 输出的都是5,这是因为 i 是全局变量,位于作用域链最顶端,当改变 i 的值的时候,所有引用了它的函数都会受到影响,当循环运行结束后,i 的最终值为5,所以点击每个 div 输出的当然是5了。这时我们可以通过闭包来延长作用域链,为 i 的值保存一个副本,使它们之间不会互相影响。
例如:
for(var i=0; i<5; i++) { function outerFun() { var j = i; function innerFun() { $('div').eq(j).on('click',function() { console.log(j); }) } innerFun(); } outerFun(); }
这里的 outerFun() 和 innerFun() 都可以用匿名自执行函数代替,例如:
for(var i=0; i<5; i++) { (function() { var j = i; (function() { $('div').eq(j).on('click',function() { console.log(j); }) })(); })(); }