面试资料积累JS-闭包（二）

闭包表现形式
闭包使用的四个场景
1.返回一个函数
2.在定时器事件监听，ajax请求，web workers或者任何异步中，只要使用了回调函数，实际上就是在使用闭包。

// 定时器
setTimeout(function handler(){
  console.log('1');
}，1000);
// 事件监听
$('#app').click(function(){
  console.log('Event Listener');
});

3.作为函数参数传递的形式。

var a = 1;
function foo(){
  var a = 2;
  function baz(){
    console.log(a);
  }
  bar(baz);
}
function bar(fn){
  // 这就是闭包
 fn();
}
foo();  // 输出2，而不是1

4.IIFE(立即执行函数)，创建了闭包，保存了全局作用域window和当前函数的作用域，因此可以输出全局的变量。

var a = 2;
(function IIFE(){
  console.log(a);  // 输出2
})();

IIFE这个函数会稍微有些特殊，算量种自执行匿名函数，这个匿名函数拥有独立的作用域，这不仅可以避免了外界访问些IIFE中的变量，而且又不会污染全局作用域，我们经常能在高级的javascript编程中看见此类函数。

使用场景还原
在面试中，解决循环输出问题是比较高频的面试题，一般都会给一段这样的代码让你来解释。那么请看下面执行结果吧！

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

6,6,6,6,6
1.为什么输出5个6？
2.如何输出1，2，3，4，5？

解1：setTimeout为宏任务，由于JS中单线程eventLoop机制，在主线程同步任务执行完成后才去执行宏任务，因此循环结束后setTimeout中的回调才依次执行。
又因为setTimeout函数也是一种闭包，往上找它的父级作用域链就是window，变量i为window上的全局变量，开始执行setTimeout之前变量已经就是6了，因此最后输出连续就是6.

解2：
方案1：
利用IIFE
可以利用IIFE，当每次for循环时，把此时的变量i传弟到定时器中，然后执行，改造后：

for(var i=0;i<=5;i++){
	(function(j){
	setTimeout(function timer(){
			console.log(j)
		},0)
	})(i)
}

方案2：使用es6中的let（块级作用域）
es6中新增了let定义变量的方式，使得es6之后，js发生了革命性的变化，让js有了块级作用域，代码的作用域以块级为单位进行执行。通过改造后的代码，可以实现上面想要的结果。

for(let i = 1; i <= 5; i++){
  setTimeout(function() {
    console.log(i);
  },0)
}

从上面的代码中可以看到，通过let定义的变量的方式，重新定义i变量，则可以用最少的改动成本，解决该问题。
方案3：定时器传入第三个参数
setTimeout作为经常使用的定时器，它是存在第三个参数的，日常工作中我们经常使用的一般是前两个，一个是回调函数，另一个是时间，第三个参数是给第一个函数的参数，那结合第三个参数调整完成后是：

for(var i=1;i<=5;i++){
  setTimeout(function(j) {
    console.log(j)
  }, 0, i)
}

从中可以看到，第三个参数的传递可以改变setTimeout的执行逻辑，从而实现我们想要的结果，这也是一种解决循环输出问题的途径。

总结：

闭包使用在日常的js编程中，但是由于闭包会使一些变量一直保存在内存中不会自动释放，所以如果大量使用的话就会消耗大量内存，从而影响网页性能。因此，你更应该深入理解闭包的原理，从而保证交付的代码性能更好。