通俗理解JavaScript闭包

---

一、闭包是什么？

闭包是js的一个难点也是它的一个特色，是我们必须掌握的js高级特性，那么什么是闭包呢？它又有什么用呢？
我们都知道，js的作用域分两种，全局和局部，基于我们所熟悉的作用域链相关知识，我们知道在js作用域环境中访问变量的权利是由内向外的，内部作用域可以获得当前作用域下的变量并且可以获得当前作用域的外层作用域下的变量，反之则不能，也就是说在外层作用域下通常无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的，那么我们想在一个函数内部也有限权访问另一个函数内部的变量该怎么办呢？闭包就是用来解决这一需求的，闭包的本质就是在一个函数内部创建另一个函数。

因此得出结论：能够读取其他函数内部变量的函数，就是闭包

二、满足闭包的两个个特征

我们首先要知道闭包有3个特性：

1. 函数嵌套
2. 内部函数引用外部函数的变量

可以说，只要满足了以上这两个特征，那么就算闭包

三、经典案例

function a() {
   var name = '小明'
   return function() {
  	 return name
   }
   
}

var result =  a()
console.log(result()) // '小明'

在这段代码中，a()中的返回值是一个匿名函数，这个函数在a()作用域内部，所以它可以获取a()作用域下变量name值，将这个值作为返回值赋给全局作用域下的变量result,实现了在全局变量下获取到局部变量中的变量的值

再来看一个闭包的经典例子

function fn() {
	var num = 3
	return function() {
		var n = 0
		console.log(++n)
		console.log(++num)
	}
}
var fn1 = fn()
fn1()  //1 4
fn1()  //1 5

一般情况下，在函数fn执行完后，就应该连同它里面的变量一同被销毁，但是在这个例子中，匿名函数作为fn的返回值被赋值给了fn1，这时候相当于fn1=function(){var n = 0 … }，并且匿名函数内部引用着fn里的变量num，所以变量num无法被销毁，而变量n是每次被调用时新创建的，所以每次fn1执行完后它就把属于自己的变量连同自己一起销毁，于是乎最后就剩下孤零零的num，于是这里就产生了内存消耗的问题

四、经典面试题

写一个for循环，让它按顺序打印出当前循环次数

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

按照预期它应该依次输出1 2 3 4 5，而结果它输出了五次5，这是为什么呢？原来由于js是单线程的，所以在执行for循环的时候定时器setTimeout被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到setTimeout可以执行的时候，for循环已经结束，i的值也已经编程5，所以打印出来五个5，那么我们为了实现预期结果应该怎么改这段代码呢？（ps:如果把for循环里面的var变成let，也能实现预期结果)

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

引入闭包来保存变量i，将setTimeout放入立即执行函数中，将for循环中的循环值i作为参数传递，100毫秒后同时打印出1 2 3 4 5

总结闭包的好处与坏处

1. 好处
   ①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
   ②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
   ③匿名自执行函数可以减少内存消耗

2. 坏处
   ①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
   ②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响