JS闭包详解

1.先看看常见的例子吧:

var fn=null;
function foo(){
var a=2;
function innerFoo(){
console.log(a);
}
fn=innerFoo; 

}

foo();

bar();

下面我们通过断点调试的方法来看看执行顺序:

fn=null——>foo()——>foo()内部 a=2——>fn=innerFoo()——>bar()——>bar()内部 fn()——>innerFoo() 内部console.log(a)——>结束

ps:

按照常理foo()执行完毕之后,其执行环境生命周期会结束,但是通过fn=innerFoo,函数innerFoo的引用被保留了下来,复制给了全局变量fn,所以导致了foo的变量对象也被保留了下来。所以函数fn在bar内部执行时,依然可以访问被保留下来的变量对象。依然能够访问a的值
我们就称foo为闭包

2.闭包的应用场景:

  延迟函数setTimeout();

下面我们看一个例子:

function fn(){
console.log('this is test');
}
var timer=setTimeout(fn,3000);
console.log(timer);

在控制台先输出timer的值为1,然后3秒后输出this is test。

我们先获取到timer值,代表setTimeout函数已经执行完毕,为什么3s后我们还是执行了函数fn()呢?

这是因为setTimeout通过特殊的方式,保留了fn的引用,让setTimeout的变量对象,并没有在其执行完毕后被垃圾收集器回收。因此setTimeout执行结束后3秒,我们仍然能够执行fn函数。

3.常见面试题:

利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5

for(var i=1;i<=5;i++){
setTimeout(function timer(){
console.log(i);
},i*1000);
}

思考:这段代码会输出什么呢?

我们又该如何修改呢?

答案在这:https://github.com/nannan0109/JS

原文地址:https://www.cnblogs.com/lsnan/p/6602062.html