每天一个前端面试题之 javascript中的闭包

一、闭包的定义

闭包是指有权访问另一个函数作用域中变量的函数。或者说函数和函数能访问到外部变量的总和组成一个闭包。

下面有两个闭包的例子

function funA(){
  var a = 10;  // funA的活动对象之中;
  return function(){   //匿名函数的活动对象;
        alert(a);
  }
}
var b = funA();
b();  //10

function outerFn(){
  var i = 0; 
  function innerFn(){
      i++;
      console.log(i);
  }
  return innerFn;
}
var inner = outerFn();  //每次外部函数执行的时候,都会开辟一块内存空间,外部函数的地址不同，都会重新创建一个新的地址
inner();
inner();
inner();
var inner2 = outerFn();
inner2();
inner2();
inner2();   //1 2 3 1 2 3

二、闭包的作用

1.闭包让外部访问函数内部变量成为可能。或者说是用于间接访问一个变量或者隐藏一个变量，因为此时你并不想用一个全局变量（不想让它随便改动，造成全局变量的污染），所以要用局部变量，但是要暴露一个访问器，让这个变量也能被改变。

2.在ES6没出来之前，用var定义变量存在变量提升问题。此时用闭包可以模仿块级作用域。

三、使用闭包可能存在的问题

内存泄漏。由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

最后，贴两个实际的应用闭包的代码

 //应用一：用闭包的形式实现点击li输出当前li的索引号 
		var lis = document.querySelectorAll('li');
		for(var i = 0; i < lis.length; i++) {
			//立即执行函数被称为一个小闭包，因为立即执行函数内的任何一个函数都可以使用i这个变量
			(function(i) {
                lis[i].onclick = function() {
                	console.log(i);
                }
			})(i);
		}

//应用二：在3s后打印出所有li元素的内容
		for(var i = 0; i < lis.length; i++) {
			(function(i) {
				setTimeout(function() {
					console.log(lis[i].innerHTML);
				}, 3000);
			})(i);
		}

//应用三：计算打车的价格,起步价3公里内13元，超过3公里每公里5元
		var sum = (function() {
			var start = 13;
			var total = 0;
			return {
				price: function(d) {
					if(d <= 3) {
                        total = start;
					} else{
						total = start + (d - 3) * 5;
					}
					return total;
				},
				crowd: function(flag) {
                    return flag ? total + 10 : total;
				}
			}
		})();
		console.log(sum.price(10));
		console.log(sum.crowd(10));
		console.log(sum.price(3));
		console.log(sum.crowd(0));